Shopify
Shopify accessibility: what breaks out of the box, and how to fix it
Shopify is a good platform, and still almost no Shopify store complies. That is not a contradiction: the part Shopify controls — the hosted checkout, the infrastructure — is reasonably looked after, but the part that decides whether a customer can buy lives in your theme, and the theme is yours. This page goes component by component: what fails, which criterion it breaks, and exactly what changes.
Shopify neither makes you compliant nor stops you from being compliant. The hosted checkout helps; the theme (Dawn included) ships with known barriers in the menu, the product gallery, the variant picker, the cart drawer and predictive search. All of them are fixed in the theme’s .liquid files, JavaScript and CSS — none of them from the admin panel.
What Shopify provides and what you provide
Worth separating properly, because most of the marketing noise blurs the two.
What Shopify provides: the hosted checkout, which the platform maintains and improves without you touching anything, and the base components of its official themes, which have improved release after release.
What you provide: the theme and its customisations, the apps you install (third-party popups and search bars are the worst offenders), your images and their alternative text, and the copy on your product pages. That is where 90 % of what an audit finds actually lives.
One nuance that matters if you sell in Europe: a well-kept checkout does not exempt you, because the obligation looks at the whole service, not at one leg of it.
The seven barriers that show up almost every time
| Component | What fails | WCAG | The fix |
|---|---|---|---|
Menu and dropdownsheader.liquid | The menu button never updates aria-expanded, and mega menus trap keyboard focus. | 4.1.2 · 2.1.1 | Update aria-expanded on open and close, and tie the submenu in with aria-controls. |
Product galleryproduct-media-gallery.liquid | Thumbnails are buttons with no accessible name and the arrows are icon-only. | 1.1.1 · 2.4.4 | Give each an aria-label such as “View image 2 of 7” and mark the active one with aria-current. |
Variant pickerproduct-variant-picker.liquid | The chosen colour is distinguished by colour alone, and sold-out variants are never announced. | 1.4.1 · 1.3.1 | Group in a fieldset with a legend, use real radios, and add “Sold out” as hidden text. |
Cart drawercart-drawer (JS) | Focus stays behind when it opens, Escape does not close it, and focus never returns. | 2.4.3 · 2.1.2 | Move focus on open, keep it inside, close on Escape and return it to the triggering button. |
Predictive searchpredictive-search.liquid | Results appear unannounced: someone who cannot see the screen has no idea there are any. | 4.1.3 · 1.3.1 | Announce the result count with role="status" and aria-live="polite". |
Footerfooter.liquid | The newsletter field uses grey placeholder text as its label and social icons have no name. | 3.3.2 · 1.1.1 | A real hidden label tied with for, and an aria-label on every icon. |
Contrast and focusbase.css | The sale badge and disabled buttons fall below 4.5:1; the focus ring is barely visible. | 1.4.3 · 2.4.7 | Darken those colours and give focus a 3 px outline with an offset. |
File names refer to Dawn and the official themes derived from it. In a paid theme the path changes; the problem does not.
Why the app-store widget does not solve it
The Shopify App Store has dozens of accessibility widgets at €20–50 a month. None of them fixes anything in the table above, because none of them rewrites your theme: they add a layer on top with contrast and font-size buttons. The focus lost when the cart drawer opens is still lost, and the size picker still does not say which size is selected.
Worse: some inject incorrect ARIA onto elements that were already fine and make the screen-reader experience worse. If you already have one installed, do not rip it out today — but do not count it as compliance.
Test your store in ten minutes, no tools needed
- Put the mouse away. From the homepage, reach a product, pick a variant, add it to the cart and get into checkout using only Tab, Shift+Tab, Enter and the arrow keys.
- Watch where the focus is at every step. The moment you cannot tell which element is selected, that is a 2.4.7 failure.
- Open the cart drawer and press Escape. It must close and return focus to the button that opened it.
- Zoom the page to 200 %. Nothing should overlap or force horizontal scrolling.
- Turn images off in the browser. If your product pages go mute, alternative text is missing.
If any of this fails, you already have the list of what to fix before thinking about statements or certificates.
Want the full list for your store?
The free scan gives you a first map of your store’s barriers in minutes: no account, no card, no commitment.