How do I make my e-commerce site accessible?

Start with the five highest-impact fixes: add alt text to product images, fix color contrast failures, label all form fields, enable keyboard navigation on interactive elements, and announce dynamic content updates to screen readers. These address 70-80% of real user impact.

The right approach: prioritize by user journey

Accessibility improvements have the most impact when applied to the critical conversion path first. A screen reader user who can navigate to a product page but can’t add to cart or complete checkout is still completely excluded from your store. Fix the purchase funnel before addressing less critical pages.

Priority order:

1. Checkout (most critical — conversion directly blocked)
2. Product pages (purchase decision happens here)
3. Category and navigation (discovery pathway)
4. Homepage and supporting pages (lower direct conversion impact)
5. Content and blog pages (least critical for purchase journey)

Step 1: Audit what you have

You can’t fix what you haven’t measured. Run an audit before starting remediation work.

Automated tools (fast, catches 30-40% of issues):

• Install the axe browser extension and run it on each key page type
• Use WAVE (wave.webaim.org) for a visual overlay of issues
• Run Google Lighthouse accessibility audit (built into Chrome DevTools)

Manual testing (required to find the other 60-70%):

• Navigate your full purchase flow using only keyboard (Tab, Enter, Space, Arrow keys)
• Enable VoiceOver on Mac or NVDA on Windows and attempt to complete a purchase
• Check color contrast for every text style in your design

Document findings categorized by severity: Critical (blocks user completely), Serious (significantly impairs user), Moderate (creates friction), Minor (small issue with workaround available).

Step 2: Fix the critical path

Checkout form labels. Every input field needs an associated <label> element linked via for and id attributes. Placeholder text is not a label — it disappears when the user types. Missing labels are the single biggest checkout accessibility failure.

Add to Cart button keyboard accessibility. If your Add to Cart button is a custom element built on a <div> or <span>, it’s not keyboard accessible by default. Replace with a <button> element, or add tabindex="0", role="button", and keyboard event handlers. Test by pressing Tab to reach it and Enter to activate it.

Variant selector accessibility. Size and color pickers built as styled divs have no native keyboard support. These need role="radiogroup" and role="radio" ARIA attributes with keyboard interaction (Arrow keys to navigate) to be accessible.

Error message accessibility. Form errors that are only visible as red text fail users with color vision deficiency and screen reader users. Add descriptive text error messages and link them to their input with aria-describedby. When form validation fails on submission, move focus to the first error.

Step 3: Fix product pages

Image alt text. Add descriptive alt text to every product image that conveys buying information. Main shot: full product description. Angle variants: “[product] from rear/side”. Detail shots: “Close-up of [feature]”. Lifestyle shots: “[product] in context description”.

Product description structure. Use proper heading hierarchy (H1 for product name, H2 for section headings like “Specifications”, “Reviews”). This allows screen reader users to navigate via heading shortcuts and gives search engines better content structure.

Focus states. Ensure every interactive element (buttons, links, tabs, accordions) has a visible focus indicator when navigated via keyboard. Don’t suppress the default browser outline without replacing it with a custom styled equivalent.

Step 4: Fix navigation

Skip navigation link. Add a “Skip to main content” link as the first focusable element on every page. It can be visually hidden but must be visible when focused. This allows keyboard users to bypass repetitive navigation on each page.

Keyboard-navigable dropdown menus. Navigation menus with submenus must open and navigate with keyboard. Test: press Tab to reach the parent item, Enter or Space to open the submenu, Arrow keys to navigate within, Escape to close and return focus.

Consistent navigation. Navigation structure, order, and labels should be consistent across pages. Inconsistency forces screen reader users to re-learn your structure repeatedly.

Step 5: Handle dynamic content

Modern e-commerce pages update content without page reloads: filters apply, carts update, stock alerts appear, search results refresh. Screen reader users need to be informed of these changes.

ARIA live regions announce dynamic content updates to screen reader users automatically. Add aria-live="polite" to regions that update dynamically. Use aria-live="assertive" only for critical alerts (errors, session timeouts) — it interrupts the user’s current action.

Page title updates. In single-page application contexts (many modern headless sites), ensure the page <title> element updates when the user navigates. Screen readers read the page title on load to orient users.

Maintenance and ongoing compliance

Accessibility is not a one-time fix. Every new feature, every design update, every third-party widget can introduce new issues. Integrate accessibility into your ongoing workflow:

• Include accessibility review in your design process (check contrast, label associations, focus order in Figma before development)
• Add keyboard and screen reader testing to your QA checklist for new features
• Run automated accessibility checks in your CI/CD pipeline
• Review third-party tools (chat widgets, review platforms, payment providers) for accessibility before integrating

A UX audit gives you a complete prioritized accessibility remediation plan and establishes the baseline for ongoing monitoring.

For a complete breakdown, read European Accessibility Act Ecommerce Compliance: Complete Guide for Online Retailers.