Shopify theme accessibility: what to build and what to check

Accessibility in a Shopify theme is not a separate workstream. It's a handful of decisions in the components everyone builds anyway — the menu, the cart drawer, the variant picker, the forms. Get those right and most of the work is done. Get them wrong and no amount of remediation later fixes it cleanly.

It's also increasingly a legal requirement rather than a nicety, and the requirements in the EU in particular keep tightening.

The components that actually break

The mobile menu. Almost always a drawer, and almost always missing focus management. When it opens, focus must move into it; while open, tab must not escape to the page behind; on close, focus returns to the button that opened it; Escape closes it.

The cart drawer. Same three rules, plus one more: when an item is added, screen reader users need to be told. That means a live region announcing "Added to cart", not a silent visual change.

The variant picker. Radio inputs with real labels, not clickable <div>s. Unavailable combinations must be conveyed in text, not only by colour or opacity. This is the component most often rebuilt as unlabelled divs and it's the one customers most need to operate.

Predictive search. A combobox pattern: the input needs the right roles and states, results need to be reachable by keyboard, and the result count needs announcing.

Modals and popups. Newsletter popups are the worst offenders — they steal focus, trap it badly, and frequently can't be dismissed by keyboard at all.

The basics that cost nothing

• Semantic elements. <button> for actions, <a href> for navigation. A <div onclick> is invisible to keyboard and assistive tech.
• One <h1> per page, and heading levels that descend without skipping.
• Every form input has a <label>. A placeholder is not a label — it disappears when typing starts.
• Alt text that says what the image shows. Decorative images get alt="", not a filename.
• Visible focus styles. Never outline: none without a replacement. Removing focus rings for aesthetics makes the store unusable by keyboard.
• Text contrast of at least 4.5:1. This is where colour schemes in theme settings earn their place — they let you guarantee combinations rather than hoping a merchant picks sensible ones.
• Don't convey meaning by colour alone. "Out of stock" needs to say so.

Errors and dynamic content

Form errors need to be associated with their field, not just rendered in red above the form. Anything that changes without a page load — cart updates, filter results, error messages — needs an appropriate live region, or a screen reader user simply doesn't know it happened.

This is the single biggest gap in most custom themes: the visual feedback exists, the announced feedback doesn't.

Where Dawn helps

Shopify's base theme has had real accessibility work done on it — focus management in drawers, keyboard operation, sensible defaults. That's a substantial part of the case for starting from Dawn rather than an empty folder, and a substantial risk of building from scratch: you're reimplementing solved problems and you will not get all of them right.

If you replace one of Dawn's components, you inherit the responsibility for its accessibility along with it.

Testing in twenty minutes

You don't need specialist tooling for the first pass:

1. Unplug the mouse. Tab through the homepage, a collection, a product page and checkout. Can you reach and operate everything? Can you always see where you are?
2. Open and close every drawer and modal by keyboard. Does focus go in? Does Escape work? Does focus come back?
3. Zoom to 200%. Does the layout hold, or does content get cut off?
4. Run an automated checker — Lighthouse or axe. It catches contrast, missing labels and ARIA misuse. It will not catch focus management, which is why step one comes first.
5. Turn on a screen reader and add something to the cart. VoiceOver on macOS, NVDA on Windows. Ten minutes here is more informative than any report.

Automated tools find perhaps a third of real issues. The keyboard test finds most of the rest.

Put it in the brief

Accessibility retrofitted is expensive and partial; accessibility built in is nearly free, because it's mostly about choosing the right element and managing focus in four components. It belongs in the specification alongside performance — both are properties of how a theme is built, not phases at the end. How a custom theme is built treats it that way.

If the store can't be used with a keyboard, it can't be used by a meaningful number of your customers — and by the assistive technology that will eventually be checked against it.