Accessibility law is not one rule. A store selling in the United States is judged by courts that treat WCAG 2.1 AA as the working benchmark under the ADA. A store selling to customers in the EU falls under the European Accessibility Act, which points at EN 301 549, and that in turn builds on WCAG 2.1 AA. The technical work underneath both is almost the same, which is why one checklist can serve both markets.
Each item below says how to test it in a few minutes, how to fix it in a Shopify theme, and which WCAG success criterion it maps to. Tick items as you pass them. The counter keeps score and your ticks stay in this browser.
Which rules apply to you
United States: ADA
Title III applies to businesses open to the public, and courts have applied it to online stores. No regulation names a technical standard for private websites, but demand letters and settlements consistently cite WCAG 2.1 AA. Claims are brought by private parties, so exposure is about complaints, not inspections.
European Union: EAA
Directive (EU) 2019/882 has applied since 28 June 2025 and covers e-commerce services offered to consumers in the EU, including from non-EU sellers. Micro-enterprises (fewer than 10 staff and turnover or balance sheet up to €2 million) are exempt for services. Enforcement is by each member state, and you are expected to publish an accessibility statement.
Elsewhere
The UK Equality Act 2010, Canada’s AODA in Ontario and similar national rules all point to the same technical target. Passing the checks below counts toward all of them.
This is general information, not legal advice. Your exact duties depend on your size, your markets and where your customers are. A lawyer can tell you the legal position, and an audit can tell you where the code stands.
Images and media
How to check it, and how to fix it
Check: Open a product page with a screen reader (NVDA free, VoiceOver built in) or inspect the image. “IMG_4821.jpg” or an empty alt on a product photo is a fail.
Fix: Describe what a buyer needs: colour, material, what is shown. In Shopify, set it on the media in the product admin, and make sure your theme outputs it.
How to check it, and how to fix it
Check: Dividers, background flourishes and icon duplicates should have alt="" so they are skipped.
Fix: Use empty alt, not a missing alt. A missing attribute makes some readers announce the file name.
How to check it, and how to fix it
Check: Banners and size charts saved as images are invisible to screen readers and do not resize.
Fix: Put the words in the page as text. If an image must carry text, repeat it in the alt text.
How to check it, and how to fix it
Check: Play each video with sound off. Can you follow it? Does a hero video keep moving with no pause control?
Fix: Add captions at the source (YouTube, Vimeo, or an uploaded .vtt). Add a visible pause button to moving hero content.
Navigation and keyboard
How to check it, and how to fix it
Check: Load the page, press Tab once. A link should appear and jump past the header.
Fix: Most Shopify themes ship one. Custom headers often delete it.
How to check it, and how to fix it
Check: Put the mouse away. Tab through the header, open the mega menu with Enter or Space, and close it with Escape.
Fix: Hover-only menus are the most common failure we see. Menus need to open on focus or on a button press.
How to check it, and how to fix it
Check: While tabbing, you should always see where you are. A theme that sets outline:none with no replacement fails.
Fix: Add a clear :focus-visible style with at least 3:1 contrast against the background.
How to check it, and how to fix it
Check: Open the cart drawer by keyboard. Tab should stay inside it, Escape should close it, and focus should return to the cart button.
Fix: This is a native-code fix. A widget cannot repair it.
How to check it, and how to fix it
Check: Use a headings extension (HeadingsMap) or inspect the page. Headings chosen for size rather than meaning confuse screen reader navigation.
Fix: Fix in the theme template. Style headings with CSS, not by picking a smaller tag.
How to check it, and how to fix it
Check: Header, nav, main and footer should be real elements. Every page needs a distinct title.
Fix: Check theme.liquid for <main> and for a title that includes the page name.
How to check it, and how to fix it
Check: “Click here”, “Read more” and icon-only buttons with no name are fails.
Fix: Add visible text, or an aria-label, such as “Add to cart: Linen shirt”.
How to check it, and how to fix it
Check: View source. The html tag should carry lang="en" (or the store language).
Fix: Multi-language stores need the lang attribute to change with the locale, and on inline passages in another language.
Product page
How to check it, and how to fix it
Check: Tab to the swatches. A screen reader should say which option, and which one is chosen.
Fix: Use real radio buttons or a labelled select. Colour-only swatches also need a text name.
How to check it, and how to fix it
Check: Look for “out of stock” shown only in grey, errors only in red, or swatches with no name.
Fix: Add text, an icon with a name, or a pattern alongside colour.
How to check it, and how to fix it
Check: Add an item with a screen reader on. Silence means a blind shopper does not know it worked.
Fix: Add an aria-live status region that carries the confirmation message.
How to check it, and how to fix it
Check: Try the quantity stepper and image gallery by keyboard. Auto-rotating carousels need a pause control.
Fix: Label the controls (“Increase quantity”) and stop auto-advance or add a pause.
Cart, forms and checkout
How to check it, and how to fix it
Check: Click the label text. The cursor should enter the field. Placeholder-only fields fail.
Fix: Use <label for="id">. Do not rely on placeholder text as the label.
How to check it, and how to fix it
Check: Submit an empty form. Does the error say what is wrong and where, and is it announced?
Fix: Show the message next to the field, connect it with aria-describedby, and move focus to the first error.
How to check it, and how to fix it
Check: Name, email, address and card fields should offer the browser’s autofill.
Fix: Add the correct autocomplete tokens (given-name, email, postal-code and so on).
How to check it, and how to fix it
Check: Image CAPTCHAs and “retype this code” steps lock people out.
Fix: Use an accessible verification method. WCAG 2.2 also asks that authentication not rely on a cognitive test.
How to check it, and how to fix it
Check: Complete a test order with only a keyboard. Include discount codes and shipping choice.
Fix: Shopify controls much of checkout, so test what the platform gives you and fix your own customisations. Keep notes of the result.
Colour, size and zoom
How to check it, and how to fix it
Check: Test body text, buttons, sale prices, placeholder text and text over images with a contrast checker.
Fix: Light grey on white and white on a brand-colour button are the usual offenders. Fix the colour tokens once, in the theme.
How to check it, and how to fix it
Check: Pale input outlines and faint icons are common on minimal themes.
Fix: Darken borders and icons that carry meaning.
How to check it, and how to fix it
Check: Zoom the browser to 400% (equivalent to 320px) and use the page. Content should reflow.
Fix: Fix fixed widths and overflow. Do not disable pinch-zoom with maximum-scale.
How to check it, and how to fix it
Check: Close icons, quantity buttons and footer links are the usual failures on mobile.
Fix: Add padding to the clickable area rather than just enlarging the icon.
How to check it, and how to fix it
Check: Apply a text-spacing bookmarklet. Nothing should be cut off or overlap.
Fix: Avoid fixed heights on text containers.
Third-party apps and widgets
How to check it, and how to fix it
Check: Each app injects its own code, and each is a separate test. A popup you cannot close by keyboard blocks the whole page.
Fix: Test every installed app that renders on the storefront. Remove or replace the ones that fail.
How to check it, and how to fix it
Check: Turn the widget off. If the barriers are still there, the widget was never the fix.
Fix: Fix the theme code. Overlays have been named in lawsuits and do not satisfy the law on their own.
Paperwork and process
How to check it, and how to fix it
Check: A page that says which standard you aim for, known gaps, and how to report a problem. Required in practice for EAA compliance, and a strong signal of good faith elsewhere.
Fix: Link it from the footer. Keep it honest and date it.
How to check it, and how to fix it
Check: Test the contact route you publish. Respond quickly and keep a log.
Fix: A named email address and a response target (for example, 5 working days) is enough to start.
How to check it, and how to fix it
Check: A report listing what was tested, what failed, what was fixed and when. This is what you show a regulator or a lawyer.
Fix: Keep audit reports, retest results and a VPAT or conformance report where a buyer asks for one.
How to check it, and how to fix it
Check: New theme sections, apps and campaigns re-introduce problems.
Fix: Add a keyboard and contrast check to your launch checklist, and retest after every theme update.
What your score means
Tick the checks you have confirmed and your result appears here.
Be careful with a high score. Items you did not actually test do not count as passes, and this list cannot cover every WCAG criterion. It is a fast screen for the problems that cause the most real harm and the most complaints. A full audit tests every template and journey against all of WCAG 2.2 AA with assistive technology, which is a different job.
What this checklist cannot tell you
- Whether a screen reader user can finish a purchase end to end. That needs real assistive technology testing.
- How your theme behaves after the next update or app install.
- Whether you are legally compliant. Only the courts or a regulator decide that. What you can do is remove barriers and keep evidence.
Want to see how a full test works? Read our audit methodology. For the EU rules in detail, see the European Accessibility Act guide, and for the US side, our ADA compliance page. The standard behind both is explained in the WCAG requirements guide.
Not sure about the ones you ticked?
Run a free automated scan on your store and see the issues a tool can detect in about 30 seconds. If you want a person to check the rest, ask for a manual audit.
Scan my store free