Shopify Accessibility Guide: Build a Store Every Shopper Can Use

Shopify accessibility means making sure every shopper, including people who use screen readers, keyboards, magnifiers or captions, can find a product, understand it, add it to the cart and pay. The quickest wins are choosing a well-built Online Store 2.0 theme, adding alt text to every product image, fixing button and badge contrast, naming colour swatches, and testing the full cart and checkout journey with a keyboard.

Shopify is a strong starting point, but your store depends on your theme, apps, images and copy. This guide covers what to check and fix, with reference to the WCAG checklist.

Why accessibility matters for Shopify stores

If a shopper cannot select a size with the keyboard, they leave. Accessibility is also a legal matter in many markets. E-commerce is explicitly covered by the European Accessibility Act, and online stores in the US are frequently the subject of claims under the ADA.

This article is general information, not legal advice.

Choose an accessible Online Store 2.0 theme

Your theme generates most of the storefront HTML: header, navigation, product page, collection filters and cart drawer.

Starting with Dawn

Dawn is Shopify's free reference theme for Online Store 2.0, and Shopify has stated that it was built with accessibility as a priority. It includes a skip link, visible focus styles and keyboard-operable menus and product forms. It is a good baseline to compare paid themes against.

Evaluating other themes

Before buying a theme, test its demo store:

Press Tab from the top of the page. Is there a skip link and a visible focus outline?
Open the menu, the search, and a product's variant selector using only the keyboard.
Add a product to the cart and open the cart drawer without a mouse. Does focus move into the drawer, and can you close it with Escape?

Theme customisation can undo good defaults, so repeat these checks after changing colours, fonts and sections. Our keyboard accessibility guide lists the patterns to look for.

Product image alt text in Shopify

Product images are the heart of a store, and shoppers using screen readers need text alternatives to understand them.

How to add alt text

In the Shopify admin, go to Products, open a product, click an image in the media section, and choose Add alt text. Enter a description and save.

What to write

Describe what matters for buying: colour, material, pattern, the angle shown, and anything that differs between images. For example:

"Navy linen shirt, front view, button-down collar"
"Navy linen shirt, close-up of coconut shell buttons"
"Model wearing the shirt untucked with beige chinos"

Avoid repeating the product title on every image or stuffing keywords. Decorative banners can have empty alt text. For more examples, see how to write alt text.

Contrast for buttons, badges and prices

WCAG 2.2 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and for important interface boundaries. Stores often fail on small, styled elements.

Element	Typical problem	Fix
"Add to cart" button	White text on a light brand colour	Darken the button colour or use dark text
Sale and "Sold out" badges	Small white text on pale red or grey	Increase colour contrast and font weight
Compare-at prices	Light grey strikethrough text	Use a darker grey that still reads as secondary
Text over hero images	Text sits on busy photos	Add an overlay or move text off the image
Form field borders	Very faint input outlines	Use a border with at least 3:1 contrast

In Online Store 2.0 themes, colour schemes are set in the theme editor's settings. Check every scheme you use, not just the default. Our colour contrast guide explains how to measure ratios.

Colour swatches and variant selectors

Colour swatches are common accessibility failures. A small circle of colour gives no information to a screen reader user, and someone with colour blindness may not be able to tell "forest" from "olive".

Give every swatch an accessible name with the colour, such as "Forest green".
Show the selected colour name as visible text next to the swatches.
Indicate the selected state with more than colour, such as a thick border or check mark.
Make sure swatches can be reached and selected with the keyboard.
Announce sold-out variants in text, not only by greying them out.

Product videos and media

If a product video includes speech or important information, it needs captions. Shopify supports uploaded videos as well as YouTube and Vimeo embeds; check that captions are available on whichever you use. Avoid autoplaying video with sound, and make sure any looping video or animated GIF can be paused, since WCAG requires a way to pause moving content that lasts more than five seconds.

Popups, banners and announcement bars

Discount popups, cookie banners and email capture forms are often added by apps and can block the whole page for keyboard and screen reader users. A good popup:

Moves focus into itself when it opens and returns focus when closed
Has a close button with an accessible name, and closes with Escape
Does not open immediately on page load before the user can orient themselves
Uses labelled form fields; see our accessible forms guide

Rotating announcement bars and auto-playing slideshows should have a pause control or be set not to auto-rotate.

Test the cart and checkout journey

The most important test is whether a shopper can actually buy something. Walk through this journey using only a keyboard, then again with a screen reader:

Search for a product and open it from the results.
Choose a variant (size and colour) and quantity.
Add it to the cart and open the cart page or drawer.
Change the quantity and remove an item.
Apply a discount code.
Proceed to checkout and complete the address and payment fields up to the final step.

Shopify's checkout is managed by Shopify and is generally well built, but customisations, checkout apps and payment methods can affect it. Pay close attention to error messages: if a postcode is invalid, is the error announced and connected to the field? Our screen reader testing guide covers how to do this with VoiceOver or NVDA.

Apps and their impact on accessibility

Each app you install can inject its own HTML, styles and scripts into your storefront. Reviews widgets, upsell popups, chat bubbles, size charts and wishlists are common sources of unlabeled buttons, keyboard traps and low-contrast text. Before installing, test the app's demo with a keyboard; after installing, rerun your tests.

Adding an accessibility widget to Shopify

An accessibility widget lets visitors adjust the store to their needs, for example with larger text, higher contrast, a dyslexia-friendly font, a reading guide or pausing animations. To add the Openwise widget, copy your install code from the Openwise dashboard, then in Shopify go to Online Store, Themes, open the menu on your current theme and choose Edit code. Open layout/theme.liquid and paste the script just before the closing </body> tag, then save.

    <!-- paste your Openwise script tag here -->
  </body>
</html>

Back up your theme before editing code. Importantly, a widget does not fix missing alt text, unlabeled swatches or a keyboard trap in a cart drawer; those need to be fixed in the theme and content. We explain why in the truth about accessibility widgets.

Publish an accessibility statement

Create a page in Online Store, Pages, called "Accessibility", and link it in your footer menu. Include the standard you aim for (such as WCAG 2.1 or 2.2 Level AA), what you have tested, any known issues, and an email address or form where shoppers can report problems and get help placing an order.

Frequently asked questions

Is Shopify accessible by default?

Shopify's admin, checkout and its Dawn reference theme were built with accessibility in mind, which gives merchants a good foundation. However, your storefront's accessibility also depends on the theme you choose, your customisations, installed apps and your content, so you need to test your own store rather than assume it is accessible.

How do I add alt text to Shopify product images?

Go to Products in the Shopify admin, open the product, click the image in the media section and select Add alt text. Write a short description of what the image shows that would help a shopper decide, such as colour, material and angle, then save.

Does the European Accessibility Act apply to Shopify stores?

The European Accessibility Act covers e-commerce services offered to consumers in the EU, including from businesses based outside the EU, from 28 June 2025. Microenterprises providing services are exempt. Whether it applies to your store depends on your size and where you sell, so check the rules for your situation.

Will an accessibility app make my Shopify store compliant?

No app or widget alone makes a store compliant. Widgets give visitors helpful display controls, but compliance requires fixing the underlying issues such as missing alt text, poor contrast, inaccessible variant selectors and keyboard traps in your theme and apps.

Conclusion

An accessible Shopify store starts with a solid theme like Dawn, then depends on careful content and app choices: descriptive alt text, readable buttons and badges, named swatches, captioned videos, well-behaved popups and a checkout journey that works with a keyboard. Test regularly, especially after adding apps or changing your theme.

Scan your store's home page and a product page with our free accessibility checker to get a WCAG score and specific fixes in minutes.