Shopify Accessibility Under the EAA: What the Platform Covers, What You Own, and Why an App Won't Fix It
If you run a Shopify store and sell to customers in the EU, the European Accessibility Act applies to you, whether your company is based in Lyon, Leeds or Los Angeles. E-commerce is one of the services the EAA names explicitly, and it has applied since 28 June 2025. (Fudge)
The most common question we hear from Shopify merchants is some version of: "Isn't Shopify already accessible?" The honest answer is: partly. Shopify does a lot of the heavy lifting in the parts it controls. The problem is that a typical store is built from far more than Shopify's code.
This guide maps who owns what, where Shopify stores actually fail, the order to fix things in, and a test routine you can run without a specialist.
The shared-responsibility map
Think of a Shopify store as four layers. Shopify owns one of them outright, shares one with you, and leaves two entirely to you.
| Layer | Who controls it | Typical accessibility state |
|---|---|---|
| Managed checkout (Information, Shipping, Payment) | Shopify | Strong. Locked down and audited by Shopify. |
| Theme (templates, sections, snippets, CSS, JS) | You (or the theme developer you bought from) | Varies widely. Free OS 2.0 themes are a good baseline; paid and custom themes range from excellent to poor. |
| Apps and app blocks (reviews, upsells, pop-ups, chat, size guides, cookie banners, checkout UI extensions) | Third-party developers, but you chose to install them | The most common source of serious failures. |
| Content (product images, alt text, variant names, videos, size charts, policies, emails) | You | Entirely down to your team's habits. |
What Shopify handles
Shopify's free Online Store 2.0 themes, such as Dawn, are built with semantic HTML, skip links, ARIA on core interactive components, and keyboard-operable navigation. Shopify's managed checkout has been through a WCAG 2.1 AA audit and remediation. (TestParty)
Shopify's move to checkout extensibility also helps. The old checkout.liquid approach let merchants and agencies inject arbitrary code into checkout, which was a frequent source of accessibility regressions. That route is now closed: checkout.liquid was deprecated for the core checkout steps in August 2024, Shopify Scripts stopped working on 30 June 2026, and non-Plus stores had until 26 August 2026 to upgrade their Thank you and Order status pages. (Fudge, Flatline Agency)
What you own
Everything else. And legally, under the EAA the obligation sits with the service provider: the business selling to the consumer. A theme developer's or app vendor's claims of conformance do not transfer that obligation, in the same way that a cookie banner vendor's conformance claim doesn't protect you.
Note that checkout extensibility does not make checkout automatically safe. Checkout UI extensions from apps (upsell blocks, delivery-date pickers, gift-message fields, loyalty widgets) render inside checkout, and they are only as accessible as the app developer made them.
Where Shopify stores actually fail
These are the patterns we see most often. Almost none of them are caused by Shopify's own code.
1. Variant selectors and colour swatches
The swatch is the classic Shopify failure. Colour options rendered as coloured circles with no text label fail for screen reader users (nothing to announce) and for colour-blind shoppers (WCAG 1.4.1, Use of Color). Custom swatch components built from <div>s often can't be reached or operated by keyboard at all.
Fix: use native radio buttons (visually styled as swatches if you like) inside a <fieldset> with a <legend> such as "Colour". Each option needs a text name ("Forest green"), a visible selected state that does not rely on colour alone, and an announcement when the price, availability or image changes.
2. Image galleries and product zoom
Carousels that auto-advance, thumbnails without accessible names, and zoom features that only work on hover all lock people out. So does alt text that is just the product title repeated for every image.
Fix: give each gallery image alt text that describes what that image shows (the back of the jacket, the fabric close-up, the model wearing it). Make thumbnails buttons with names like "Show image 3 of 6". Provide pause controls for any motion, and make zoom available by click or keyboard, not only on hover. Our alt text decision tree covers product imagery in more depth.
3. Pop-ups, drawers and overlays
Newsletter pop-ups, cart drawers, quick-view modals and "spin to win" wheels are where keyboard and screen reader users get trapped or lost. Common problems: focus doesn't move into the dialog, focus isn't contained while it's open, Escape doesn't close it, and focus isn't returned to the trigger when it closes.
Fix: use a proper dialog pattern (the native <dialog> element or a well-tested component), and audit every app that opens one. Our keyboard and focus order guide has the details.
4. Size charts, specs and ingredients as images
Many stores upload size guides and nutrition or care information as JPGs. That content is invisible to screen readers and blurs at high zoom.
Fix: build them as real HTML tables with header cells. A metafield or a reusable section makes this a one-time job per product type.
5. Third-party review, chat and loyalty widgets
Star ratings with no text equivalent, review forms with unlabelled fields, chat launchers that announce as "button", and loyalty panels that can't be dismissed by keyboard all show up in real audits.
Fix: test every app before you install it (see the checklist below), ask vendors for an Accessibility Conformance Report, and remove apps that can't meet the bar. Our ACR/VPAT guide explains what to ask for.
6. Post-purchase emails
Order confirmations and shipping notifications are part of delivering the service. The Email Markup Consortium's 2026 report audited emails sent through several platforms, including Shopify, and none passed its automated checks. Many builders don't expose basic settings such as email language. Our email accessibility guide covers the template fixes.
Why an "accessibility app" won't fix this
Search the Shopify App Store for "accessibility" and most results are overlay widgets: a toolbar icon that promises compliance via one script. They can't fix a swatch component that isn't keyboard operable, a size chart that is a picture, or a modal that traps focus. Native theme-code fixes do that; overlays do not. (Fudge)
We've covered the legal and practical case in detail in Accessibility Overlay Widgets Are a Legal Liability, Not a Compliance Strategy. The short version: they can add new barriers, they conflict with the assistive technology disabled shoppers already use, and regulators and courts have not accepted them as compliance.
There are useful accessibility apps on Shopify: ones that scan your theme templates, help you manage alt text in bulk, or monitor regressions. The test is simple: does the app help you change your actual code and content, or does it try to paper over them at runtime?
A fix order for Shopify stores
If you can only do so much this quarter, work in this order. It follows the money: the steps a shopper must get through to buy.
- Product page purchase path. Variant selection, quantity, add to cart, and the cart drawer. If a keyboard user can't add an item to the cart, nothing else matters.
- Cart and the hand-off to checkout. Including any upsell or cross-sell apps that fire here.
- Checkout UI extensions. Every app block that renders in checkout.
- Navigation and search. Mega menus, filters and predictive search on collection pages.
- Pop-ups and interruptions. Newsletter, cookie consent, age gates, promotions.
- Product content. Alt text, size charts, videos (captions), and colour-only information.
- Post-purchase. Order and shipping emails, order status page, returns flow.
- Accessibility statement. Publish one that reflects reality. See what the EAA requires in an accessibility statement.
For the full journey-by-journey WCAG checklist that applies to any online store, see E-Commerce and the EAA.
A one-hour test routine for your store
You don't need specialist tools to find the worst problems. Run this on your homepage, one collection page, two product pages (one with variants), the cart and checkout.
- Keyboard only. Unplug the mouse. Using Tab, Shift+Tab, Enter, Space, the arrow keys and Escape, try to choose a variant, add to cart, open and close the cart drawer, and reach checkout. Watch for invisible focus, focus disappearing behind overlays, and controls you can't reach.
- Screen reader spot check. VoiceOver on a Mac or iPhone, or NVDA on Windows. Does each swatch announce its name? Does the cart count update audibly? Are review stars read as a rating?
- Zoom to 400%. Does the layout reflow into one column without horizontal scrolling, or do sticky headers and chat buttons cover the content?
- Automated scan. Run a browser extension scanner on each template type. Shopify stores share templates, so one fix in
main-product.liquidoften fixes every product page at once. - Disable each app in turn (in a duplicate theme) and repeat steps 1 and 2. This is the fastest way to find out which app is causing which problem.
Remember the limits of automation: scanners find a minority of WCAG issues. Our guide to choosing a WCAG checker explains what they miss.
Before you install the next app
Add a short accessibility gate to your app approval process:
- Can you open, use and close every part of it with the keyboard alone?
- Does focus stay visible and logical?
- Do its controls have meaningful names in a screen reader?
- Does it respect 400% zoom and reduced-motion settings?
- Can the vendor provide an Accessibility Conformance Report or a recent audit summary?
- If it renders in checkout, has the vendor tested its checkout UI extension specifically?
If the answer to the first question is no, the app is not ready for an EU storefront.
Does the EAA really apply to my store?
Probably, if you sell to consumers in the EU. A few points to check:
- Location doesn't matter. Non-EU sellers are in scope when they sell to EU consumers.
- The micro-enterprise exemption covers service providers with fewer than 10 staff and annual turnover or balance sheet of no more than EUR 2 million. It's real, but it is narrower than many merchants assume, and growth can take you out of it quickly.
- B2B-only stores are largely out of scope, but self-serve consumer checkouts on the same site usually aren't. Our B2B scope test walks through the grey areas.
Enforcement has also moved on. All 27 member states have transposed the directive, and national authorities are running market surveillance inspections and sending information requests, while in Germany competitor warning letters add a private enforcement route. (Level Access, Deque) See Germany's BFSG at one year for what that looks like in practice.
The bottom line
Shopify gives you a better accessibility starting point than most platforms: a hardened checkout and well-built free themes. But a disabled shopper doesn't experience "Shopify". They experience your store: your theme customisations, your swatches, your pop-ups, your review widget, your size chart, your order email. That's where the work is, and it's work an overlay can't do for you.
Start with the purchase path, test every app, fix content at the template level, and you'll be in a far stronger position than most of the EU storefronts regulators are now looking at.
This article is general information, not legal advice.
Related reading
WCAG 2.5.8 Target Size (Minimum): The 24px Rule, Its Five Exceptions, and the Dragging Fix Most Teams Skip
WCAG 2.2 added a 24 by 24 CSS pixel minimum for pointer targets and a single-pointer alternative for dragging. What 2.5.8 and 2.5.7 require, how the exceptions work, CSS patterns that pass, and how to apply the thresholds on iOS and Android.
Chatbot and AI Assistant Accessibility Under the EAA: Streaming Replies, Focus Management and the Widget Nobody Tested
Chat widgets and AI assistants sit inside checkout, banking and support flows the EAA covers, yet streaming responses, focus handling and launcher buttons routinely fail screen reader and keyboard users. What WCAG AA requires, how EU AI Act transparency duties interact, and a build-and-test checklist.
WCAG 1.4.10 Reflow: How to Pass the 400% Zoom Test Without Breaking Your Layout
WCAG 1.4.10 Reflow asks one thing: at 320 CSS pixels wide (400% zoom on a 1280px screen), can people read and use your page without scrolling in two directions? What the criterion actually requires, the exceptions teams misread, the layout patterns that fail, the CSS that fixes them, and a test method you can run in five minutes.