Ecommerce Accessibility: How to Make an Online Store Usable for Everyone

An accessible online store lets people with disabilities complete the whole journey: find products, understand them, choose variants, add to cart and check out, using keyboards, screen readers, magnification or voice control. Use WCAG 2.2 Level AA as the reference, fix issues in the site's code and content rather than relying on overlays, and test real journeys with keyboard and screen readers as well as automated tools. Legal duties vary by jurisdiction; this guide covers good practice, not legal advice.

A store that can't be used with a keyboard or screen reader turns customers away at the point of purchase. Accessibility barriers are often concentrated in the most interactive parts of ecommerce: mega menus, filters, variant selectors, carousels, modals, carts and checkout forms. These are exactly where purchases are won or lost.

Accessibility also overlaps with good UX. Clear labels, readable text, visible focus, helpful errors and predictable navigation help everyone, including people on phones in bright sunlight, older shoppers and people with temporary injuries. For general web accessibility, see website accessibility guide and accessible UI/UX design.

WCAG, published by the W3C, is the most widely used technical reference. WCAG 2.2 is the current Recommendation and adds criteria for focus visibility, target size, dragging, consistent help, redundant entry and accessible authentication (W3C WCAG 2.2). Level AA is the common target in policies and regulations.

Legal obligations depend on where you operate and sell. In the EU, the European Accessibility Act covers ecommerce services and has applied since 28 June 2025, with national laws implementing it and some exemptions, such as for microenterprises providing services (European Commission). Other countries have their own laws, and case law varies. Treat WCAG as a technical guide and get legal advice on your specific obligations. See ecommerce compliance.

Menus must work with a keyboard: open with Enter or Space, move with Tab or arrow keys, close with Escape, and never trap focus. Provide a skip link to the main content and use landmark regions so screen reader users can jump between areas. Search inputs need an accessible name, and autocomplete should follow the combobox pattern so suggestions are announced and selectable by keyboard. See search autocomplete.

Filters are a frequent failure point. Use native checkboxes, radios and buttons where possible, or give custom controls the right roles and states. When a filter changes results, announce the new results count, and don't move focus unexpectedly. On mobile, filter drawers must be reachable, labelled and closable by keyboard and screen readers. Product cards should have one clear link, alt text for images and prices that screen readers read correctly (including sale and original prices). See ecommerce filters.

Product images need alt text that describes what matters for the choice. Gallery controls must be keyboard operable and labelled. Variant selectors (colour swatches, size buttons) need text names and selected states, not only colour. Out-of-stock variants should be announced as unavailable. Stock, delivery and price changes after selecting a variant should be announced. Size guides and modals must trap focus while open and return it when closed. See product page design.

After adding to cart, confirm it in a way screen readers announce. Mini carts and drawers need proper focus management. In the cart, quantity controls and remove buttons need accessible names. In checkout, every field needs a visible label, errors must be described in text and linked to fields, required fields should be clear before submission, and time limits should be avoidable or extendable. WCAG 2.2's redundant entry criterion means not making people re-enter information they've already given in the same process, such as billing addresses when the same as shipping.

On hosted checkouts, much of this is handled by the platform, but customizations and extensions must meet the same standard. See checkout UX.

Text needs sufficient contrast against its background (WCAG AA sets 4.5:1 for normal text). Information shouldn't rely on colour alone, such as red error borders or colour-only swatches. Layouts should reflow at 400% zoom without horizontal scrolling and text should resize to 200%. Focus indicators must be visible and not hidden by sticky headers or chat widgets. Touch targets should meet WCAG 2.2's minimum size criterion.

Accessibility isn't only code. Merchandisers adding product images need to write alt text; video needs captions; size charts need to be real tables, not images; product descriptions should use headings and lists. Build these into content workflows and templates so they happen by default.

Third-party apps and widgets (reviews, chat, popups, recommendation carousels, cookie banners) often introduce barriers. Test them before installing, ask vendors about accessibility, and remove those that can't be fixed. Accessibility overlays that promise automatic compliance don't repair underlying code and can conflict with assistive technologies; fix the site itself.

Automated tools catch a portion of issues, such as missing alt attributes and contrast failures, but not whether a journey is usable. Combine them with manual keyboard testing, screen reader testing on real journeys (find a product, choose a variant, add to cart, check out), zoom and reflow checks, and testing with disabled users where possible. Test on mobile with screen readers too. See ecommerce accessibility checklist.

Accessibility degrades without process. Add it to design reviews, component libraries, definition of done, QA checklists and content workflows. Test new apps before installing. Publish an accessibility statement with a contact route and respond to reports. Re-audit key journeys after redesigns and major releases.

Shopify requires themes listed in its Theme Store to meet accessibility requirements, which gives a reasonable starting point, but customizations, third-party apps and content often introduce barriers. Test your actual store, including app blocks, popups, review widgets and chat. Checkout is hosted by Shopify, but checkout UI extensions and branding choices (such as colour contrast) are your responsibility. See Shopify Plus development for checkout extensibility.

Many shoppers with disabilities use phones with built-in screen readers, magnification or switch control. Mobile-specific barriers include tiny touch targets, gestures without alternatives (swipe-only galleries, drag-only sliders), content hidden behind hover equivalents, fixed elements covering focused content, and zoom disabled in the viewport. WCAG 2.2's dragging movements and target size criteria address some of these. Test with VoiceOver on iOS and TalkBack on Android.

For an existing store, start with an audit of key journeys, fix blockers on the purchase path, then work through high-impact issues by template. Build accessibility into the design system so new components start accessible, train content editors on alt text and structure, and add checks to QA and app procurement. Set a target standard, track open issues and re-audit periodically.

Ecommerce accessibility means every shopper can complete the journey. Use WCAG 2.2 AA as a guide, fix code and content, test real journeys with assistive technology, build accessibility into your process and get legal advice on obligations in your markets. Related: conversion research and usability testing.