Accessibility with Shopify

Shopify's themes and apps determine the accessibility. The checkout is largely given by Shopify.

Common places for findings

Theme colours with too little contrast, product images without alt text, review and popup apps without keyboard control, mega-menus that only open on hover, carousels without a pause. The Shopify core is usually not the problem — the theme, the apps and content created in the rich-text editor are.

Check and choose the theme

The theme decides contrast, visible focus, heading structure and keyboard operation of the menu and filters. Criteria before you choose: tab through the home page, a collection and a product page — is the focus always visible? Does the menu open without a mouse? Is the contrast of text and buttons at least 4.5:1? The Online Store 2.0 default themes (Dawn and those derived from it) are a solid starting point; for purchased themes it helps to run the keyboard test on the demo and to ask the vendor for an accessibility statement.

Product images, variants and rich text

Give every product image in the admin an alt text that describes the content — not the file name. The same applies to variant images. Text baked into a badge or banner as a graphic ("Sale", "Today only") is invisible to screen readers; use real text instead. In the rich-text editor of the product description, use the heading levels cleanly (don't just make text big) and lists as real lists.

Apps and embedded widgets

Review, popup, upsell and cookie-banner apps often inject their own widgets that trap keyboard focus, have no labels or show overlays with no way to close them. Test every app individually with the keyboard; slider and countdown apps need a pause and must not make anything flash. An accessibility overlay as an app does not fix the structural problems and is criticised by disability advocacy groups. When in doubt: remove the app.

Checkout: what Shopify sets, what it doesn't

Shopify's standard checkout is maintained by Shopify and is largely built accessibly — you have few levers there. What you do influence: checkout extensions and custom fields (gift message, age check) can disrupt keyboard or screen-reader use, and the path up to the checkout — cart, discount-code field, shipping selection — sits in the theme. Test those steps too.

Testing and frequently asked questions

Quick test: operate the home page, a collection and a product page with the keyboard only, zoom to 200% in the browser, run an extension like WAVE or axe DevTools. a11yglass's free scan additionally checks the delivered HTML for contrast, alt texts, labels, language and structure. Does my Shopify store need an accessibility statement? Usually yes — a store through which consumers buy is electronic commerce within the meaning of the BFSG; see the page on the accessibility statement. Is Shopify's checkout already accessible? Largely Shopify's responsibility, but extensions can break it. Which theme is accessible? There is no seal — what matters is the implementation in the specific case.

How a11yglass helps

The free scan checks the delivered HTML and CSS for automatically recognisable WCAG breaches, and names per finding the success criterion and a concrete step. It finds roughly 20–35% of issues and does not replace a full assessment.

Read on

General information to the best of our knowledge, not legal advice. For an individual case, contact a law firm specialising in IT law.