Shopify accessibility: what your theme and apps handle, what you do, and how to test

Who is responsible for what

What Shopify says about themes

Shopify's developer documentation on accessibility best practices for themes says a theme must allow links, buttons, dropdown navigation and form controls to be operated by keyboard, with a visible focus indicator and a focus order that follows the page. Its Theme Store requirements focus testing on the path from the home page to checkout. The help center sets contrast targets of 4.5 to 1 for body and button text and 3 to 1 for large text and non-text elements such as input borders and icons. A theme from the store meeting those requirements gives you a better starting point, but it does not cover the apps and content you add.

A store-owner checklist

1. Scan your key pages: home, a collection, a product, the cart and a content page. Use the free scan or another checker.
2. Buy a purchase by keyboard. From the home page, add a product to the cart, open the cart and reach checkout using only Tab, Enter and Space. Cart drawers and popups should move focus into themselves, keep it inside while open and close on Escape.
3. Write alt text for every product image in the product media settings. Describe what matters for a buyer, for example color and material. Use empty alt text for purely decorative images. See the alt text guide.
4. Check color settings. Compare each text and button color pair with a contrast checker (guide). Text over banner photos is the most common failure.
5. Audit your apps. Disable one at a time and rescan if a problem appears. Ask vendors for their accessibility conformance information.
6. Check variants and prices. When a shopper picks a size or color, the new price and sold-out status should be announced to screen readers, not only shown visually.
7. Label every form field, including newsletter and contact forms, and make error messages specific (form labels).
8. Publish an [accessibility statement](/guides/accessibility-statement-guide) and link it in the footer.
9. Retest after theme updates and every new app.

How a Shopify store is put together

A Shopify store is made of layers, and knowing which layer a problem sits in tells you who can fix it.

Choosing a theme with accessibility in mind

Themes differ greatly. Some are built with accessible patterns for navigation, forms and focus, and others rely on heavy scripts and custom controls that are hard to use with a keyboard. Before you buy or switch, take half an hour to test the theme's demo store.

1. Open the demo on a phone and on a desktop and zoom to 200 percent. Does the layout hold?
2. Tab through the home page. Can you see where you are, and can you open the menu and the cart?
3. Open a product page. Can you pick a size and color with the keyboard, and does the page announce your choice?
4. Add an item to the cart and open the cart drawer. Can you close it with Escape, and does focus return to a sensible place?
5. Read the theme's documentation for any statement about accessibility, and ask the developer what testing they have done.

Shopify's own free themes are a reasonable baseline, since the company states that it builds them with accessibility in mind. Customizations can introduce new problems, so retest after changes.

The product page, step by step

The product page is where purchases begin, so give it extra attention.

• Images. Give each meaningful image a short description of the product as it appears, such as "Navy wool coat, front view". Mark purely decorative images as such. See alt text.
• Variant pickers. Make sure size and color options have clear labels, can be reached with the Tab key and announce the selected choice. Swatches that show only a color need a text name.
• Price and stock. Do not rely on color alone to show a sale price or an out-of-stock item. Use text such as "Sale" or "Sold out".
• Quantity and add to cart. The buttons need names and should be large enough to tap. See target size guide.
• Reviews and questions. Third-party review widgets often have their own problems; test them.
• Image galleries and zoom. Check that every function works with a keyboard and that a zoomed image does not trap focus.

Collections, search and filters

Filters are among the most common trouble spots. A filter that updates the list of products without telling a screen reader leaves the shopper guessing. Look for a visible count of results, a clear way to remove a filter and a focus order that goes from filter to results. Check that the search box has a label and that suggestions can be reached with the keyboard.

Cart and checkout

Shopify controls much of the checkout on its hosted pages. You can usually adjust branding, colors and some fields, and you should check that your changes keep contrast and labels intact. Test a full purchase with the keyboard alone and with a screen reader, using a test order if you can. Pay attention to the cart drawer if your theme uses one, because it is part of your theme and not Shopify's checkout. For form fixes, see form labels.

Apps: a short review routine

1. List every app that adds something visible to a page.
2. Look for an accessibility statement in the app listing or the vendor's site.
3. Test each app on a real page with the keyboard and zoom.
4. Contact vendors about any problems, and keep a record of their answers.
5. Remove apps you no longer use, since they can leave code behind.

Editing theme code safely

If you or a developer edit the theme, work on a copy and test before publishing. Common fixes include restoring the visible focus outline, adding a label to an icon button, changing text colors and adding the missing language attribute. Keep a note of each change, so that after a theme update you know what to reapply.

Content habits that keep a Shopify store accessible

Most accessibility problems on a store that was built well come from content added later. A few habits for the people who add products and pages prevent most of them.

• Write descriptions for images when you upload them, not after. The alternative text field in the product media editor takes a few seconds.
• Use heading styles, not bold paragraphs, for section titles in descriptions and pages.
• Write link text that makes sense out of context. "Read our returns policy" is better than "click here".
• Avoid putting important text in images. A banner with the delivery cut-off date should also exist as real text.
• Caption videos or provide a transcript.
• Check colors when you create promotional sections. Pale text on a photo is a common failure.
• Be careful with emojis and special characters in names, since screen readers read them aloud.

A pre-launch test plan for a Shopify store

Selling in several languages and markets

If you use Shopify's language and market features, each translated page needs the same care as the original. Check that the page language attribute changes with the translation, that translated text fits in buttons and menus without being cut off, and that alternative text is translated, not left in the first language. Right-to-left languages need extra testing of layout and focus order.

Working with a Shopify expert

If you hire a developer or agency, make accessibility part of the brief. Ask which theme they recommend and why, request that they test with a keyboard and a screen reader and ask for a short record of what they tested. After the work, check it yourself with the pre-launch test plan above. Our agency QA workflow shows what a good process looks like from the other side of the table.

Where to report a problem you cannot fix

Some problems sit in code you do not control. When that happens, collect the details: the page address, what you did, what you expected and what happened, along with the browser and device. Send them to the theme developer, the app vendor or Shopify support, whichever owns that layer. Keep a copy of the message and any reply. If the owner does not respond, consider replacing the theme or app, and offer customers another way to complete their task in the meantime, for example by email or phone. This record is also useful for your accessibility statement.

Finally, keep your own expectations realistic. A store is never finished, and accessibility is a habit more than a project. Test after each theme change, review new apps before installing them and keep a short list of known issues with dates. That routine matters more than any single fix.

Selling to the EU

If you sell to consumers in the EU, the European Accessibility Act may apply to your store. See the EAA guide for online sellers and the e-commerce accessibility checklist.

Where Clir helps on Shopify

Scan a page for free, then use the $99 One Page assessment to get each finding with the affected element, the evidence and a recommended fix. Because Clir loads the live rendered page, it tests what visitors see, including code added by apps. Agencies building Shopify stores can use Agency Pass to check client stores before launch.