How to make a Shopify theme accessible: settings, apps and what to check

Start with a theme from the Shopify Theme Store, because those must meet published accessibility requirements, then keep it accessible as you customise it: choose colour schemes with enough contrast, turn off autoplaying slideshows, keep headings in order, add alt text, and check what every app adds to your pages. Test after each change with an automated check and a keyboard pass. Shopify itself warns that following its guidelines alone does not guarantee a fully accessible store.¹

On Shopify, accessibility is shared. Shopify builds checkout and publishes its own conformance report for it, which also says merchants are responsible for assessing their online store.⁹ Your theme, your settings, your content and your apps are yours.

1. Choose the theme

Themes in the Shopify Theme Store must meet a list of accessibility requirements, including:²

• an average Lighthouse accessibility score of at least 90 across the home, product and collection pages, on desktop and mobile;
• every part of the page, including dropdown navigation, usable by keyboard, with a visible focus state and a focus order that matches the page order;
• an alt attribute on every image, and form inputs with labels tied to them;
• text contrast of 4.5:1 for body text and 3:1 for large text, borders and icons;
• touch targets of at least 24 by 24 CSS pixels.

That is a sound starting point, not a finish line. The requirements are tested with Shopify's benchmark content, not yours, and a Lighthouse score covers only what automated tests can see. If you are choosing between themes, open each demo store and try the keyboard test from our ten-minute keyboard guide on the menu, a product page and the cart drawer.

Themes from outside the Theme Store, or heavily customised by a previous developer, may not have been checked against any of this. Test them before you rely on them.

2. Make a safe copy before you change anything

In Shopify admin, go to Online Store, open the menu next to your theme and choose Duplicate. Shopify suggests this as a backup before customising, so you can discard changes and start again.⁶ Make your changes on the copy and preview it: the preview bar shows the theme name and a Draft status, and you can share a preview link with someone else to test.⁷ Publish only when you have checked it.

3. Go through the theme settings

Shopify's help page on accessible theme design lists the settings that matter most:¹

Colours live under Online Store, Edit theme, Theme settings, Colors. Most themes use colour schemes that you apply to sections; newer themes, from Horizon 4.0.0, use a colour palette instead.⁴ A scheme that works on the home page can fail when a merchant applies it to a section with smaller text, so test each section you use. Our colour contrast guide shows how to measure and fix it.

4. Fix the content

• Alt text. Add it to every product image in Products, then the media item, then Add alt text. Shopify allows up to 512 characters and recommends 125 or fewer.⁸ Banner and other images placed in theme sections are separate from product media, so check those too.
• Headings. Shopify's guidance is to use headings in order without skipping levels.¹ Pick section heading sizes for structure, not looks.
• Link text. "Shop the autumn collection" tells a screen reader user where a link goes; "Learn more" repeated three times does not.³
• Text in images. Put sale messages in real text where the section allows it, rather than baked into a banner image.

5. Check what apps add

Apps add content to your store in three ways: app blocks placed inside sections, app embeds that float over the page or add code without showing anything, and code injected directly into theme files.⁵ Reviews widgets, pop-ups, chat buttons, wishlists, size guides and upsell drawers are all common sources of accessibility problems, because each brings its own markup.

• Turn off app embeds you no longer use: Online Store, Edit theme, the App embeds icon, then the toggle next to the embed.⁵
• Test pop-ups and drawers with the keyboard: you should be able to close them with Escape and land back where you were.³
• Be wary of accessibility overlay apps that promise compliance with one line of code. An overlay does not fix your theme's code; see do accessibility widgets make a website compliant?
• When you uninstall an app that injected code, check the theme for leftovers.

6. If you or a developer edit the code

Shopify's developer guidance for themes goes further than the theme settings. Points that often need fixing in older or custom themes:³

• a skip link, visible on focus, to bypass the header;
• a lang attribute on the html element, and zoom never disabled;
• navigation in a nav element with aria-current on the current page, and dropdowns that use aria-expanded and close on Escape, not role="menu";
• sale and regular prices labelled with visually hidden text, and variant price and availability changes announced with aria-live;
• modals and drawers that move focus in, keep it there, and return it on close;
• no content that only appears on mouse hover.

Shopify also lists tools developers can use, including Lighthouse, WAVE, Accessibility Insights for Web, and a Lighthouse CI GitHub action for catching regressions.³ Keep code changes in your duplicate theme, or in version control, so a theme update does not silently undo them.

7. Test, and keep testing

1. Automated check on the home page, a collection, a product and the cart. Jralo's free check tests your homepage and up to five linked pages against WCAG 2.2 A and AA, and reads your terms, privacy and contact pages to suggest which countries' accessibility laws are likely relevant, with a link to our guide for each. That is a pointer, not legal advice.
2. Keyboard pass through the menu, a product page and the cart drawer.
3. Screen reader pass on one product page; see what a screen reader user hears on your product page.
4. Repeat after every change to the theme or apps. Stores change daily, which is why paid Jralo plans check every day and keep a dated record.

Automated testing finds many problems, not all. A Jralo app for Shopify is coming to the Shopify App Store; until it is listed, the free check works for any Shopify store by its web address. See Jralo for Shopify.