Web Accessibility for E-commerce: The SEO and Conversion Win Most Skip

15-25% of users have some form of disability that affects how they use websites. For e-commerce stores, that's a meaningful share of revenue. Beyond moral and legal arguments, accessible sites perform better on SEO, lower customer service load, and convert higher across all users.

Most operators treat accessibility as a compliance afterthought. The brands that take it seriously capture revenue competitors miss.

What accessibility means

Accessibility (a11y) is designing your site so it works for everyone, including users with:

• Visual impairments. Blind, low vision, color-blind users.
• Motor impairments. Limited dexterity, voice-control users.
• Hearing impairments. Deaf, hard of hearing.
• Cognitive differences. Dyslexia, ADHD, attention differences.

The Web Content Accessibility Guidelines (WCAG) is the standard. Most legal requirements and best practices align with WCAG 2.1 Level AA.

Why it matters beyond compliance

Legal risk

In the US, ADA lawsuits over inaccessible e-commerce sites have grown rapidly. Most are settled out of court for $5K-$50K. Larger brands have faced six-figure judgments.

Real revenue

15-25% of users have disabilities. If your site excludes them, that's foregone revenue.

SEO

Google's crawlers benefit from many of the same elements that help screen readers (alt text, semantic HTML, etc.). Accessibility work often improves search rankings.

UX for everyone

Accessibility improvements (clear contrast, readable fonts, keyboard navigation) benefit all users, not just those with disabilities.

The accessibility checklist

Color contrast

Text must have sufficient contrast against background:

• Normal text: 4.5:1 ratio minimum.
• Large text: 3:1 ratio minimum.

Tools: Contrast Checker (free), browser DevTools.

Common failures: light gray text on white background, light text on light hero images.

Alt text on images

Every meaningful image needs descriptive alt text.

Bad: alt="image1.jpg" or alt="product". Good: alt="Brown leather chelsea boot, side view, with stitched detail".

Decorative images can have alt="" (empty alt) so screen readers skip them.

For e-commerce: every product image needs descriptive alt text. SEO benefit and accessibility benefit.

Keyboard navigation

Users who can't use a mouse navigate by keyboard. Test:

• Can I tab through the entire site?
• Are focused elements visible (focus ring)?
• Can I reach and use all interactive elements?
• Can I navigate forms with Tab?
• Can I dismiss popups with Escape?

Common failures:

• Hidden focus indicators (:focus { outline: none } without replacement).
• Modals trapping focus incorrectly.
• Custom dropdowns that don't respond to keyboard.

Semantic HTML

Use the right HTML element for the job:

• <button> for buttons, not <div> with click handlers.
• <a> for links.
• <nav> for navigation.
• <main> for main content.
• <h1> through <h6> in proper hierarchy.

Semantic HTML enables screen readers to navigate your site logically.

Form labels

Every form input needs a label:

<label for="email">Email Address</label>
<input type="email" id="email" name="email">

Or wrapped:

<label>
  Email Address
  <input type="email" name="email">
</label>

placeholder is not a label substitute.

Error messages

When form validation fails:

• Show errors near the field.
• Describe the issue ("Email format is invalid" not just "Error").
• Use aria-invalid="true" for screen readers.
• Don't rely solely on color (red border without text).

Headings hierarchy

Proper heading order:

• One <h1> per page (typically the page title).
• <h2> for major sections.
• <h3> for subsections under <h2>.
• Don't skip levels.

Screen reader users navigate by heading. Bad hierarchy = bad navigation.

Responsive text

Don't disable user font scaling. Test your site at 200% zoom:

• Does content stay readable?
• Do layouts break?
• Are buttons still tappable?

Captions and transcripts

For video content:

• Captions on autoplay video.
• Transcripts available for audio.

For e-commerce: even product videos benefit from captions (sound-off browsing).

ARIA where needed

ARIA (Accessible Rich Internet Applications) attributes help when semantic HTML isn't enough:

• aria-label for elements without visible text.
• aria-describedby to link descriptions.
• aria-live for dynamic content (like cart updates).
• aria-expanded for collapsible sections.

Use sparingly. Wrong ARIA is worse than no ARIA. When in doubt: native HTML > ARIA.

Common e-commerce accessibility issues

Product image carousels

• Don't auto-advance (or pause on focus).
• Provide navigation controls accessible by keyboard.
• Announce slide changes to screen readers.

Mobile cart drawer

• Trap focus inside when open.
• Return focus to trigger when closed.
• Escape to close.

Variant pickers

• Color swatches need labels (color-only signaling fails for color-blind users).
• Size dropdowns need clear labels.
• Out-of-stock variants visibly indicated.

Checkout

• Each step labeled.
• Error states visible and described.
• Required fields marked clearly.
• Progress indicator accessible.

Filtering and sorting

• Buttons or links with clear labels.
• Selected filters announced.
• "Clear filters" option accessible.

Tools

Auditing

• axe DevTools (Chrome extension). Free, scans for issues.
• Lighthouse (built into Chrome DevTools). Includes accessibility score.
• WAVE. Free online evaluator.
• WebAIM Contrast Checker. Color contrast verification.

Continuous monitoring

• AccessiBe. Automated accessibility overlay (controversial — fixes some issues but introduces others).
• UserWay. Similar overlay tool.
• Manual audits (most reliable, most expensive).

For most stores: regular Lighthouse audits + manual testing of new features. Avoid overlay-only solutions for compliance.

Common accessibility mistakes

• Treating it as one-time fix. Accessibility regresses with new features. Build accessibility into the development process.
• Relying on overlays. Tools like AccessiBe can mask issues without fixing them. Lawsuits have targeted overlay-using sites.
• Color-only signaling. "Items in red are out of stock" doesn't work for color-blind users.
• Fancy custom components. Custom dropdowns and modals often break accessibility. Use semantic HTML or accessible component libraries.
• No keyboard testing. Most accessibility issues are caught by keyboard testing, not screen-reader testing.

A 30-day accessibility audit

For an existing store:

• Days 1-7: Run Lighthouse and axe audits. Document issues.
• Days 8-14: Fix high-priority issues (color contrast, missing alt text, broken keyboard navigation).
• Days 15-21: Fix medium-priority (form labels, headings, semantic HTML).
• Days 22-30: Manual testing with keyboard and screen reader.

After this audit, your site should hit Lighthouse accessibility score of 90+.

Building accessibility into ongoing work

For new features:

• Accessibility checked before shipping (manual or automated).
• Designs reviewed for color contrast.
• Components from accessible libraries when possible.
• Keyboard navigation tested.

This prevents regression. Without process, sites slowly break.

What "good" looks like

An accessible e-commerce site:

• WCAG 2.1 Level AA compliance.
• Lighthouse accessibility score 90+.
• Keyboard-navigable end-to-end.
• Semantic HTML throughout.
• Color contrast 4.5:1 minimum.
• Alt text on all product images.
• Form labels and error messages clear.
• Tested with screen readers (VoiceOver, NVDA).

Accessibility isn't a feature. It's how good websites are built. Operators who treat it as one of many design constraints end up with better sites for everyone — and avoid the lawsuits, the lost customers, and the eroded trust that come from doing it badly.