Shopify accessibility: a practical guide for store owners

Accessibility means people can shop your store however they use the web: with a screen reader, only a keyboard, voice control, zoomed in, or with low vision or colour blindness. If they can’t find a product, choose a size or reach checkout, that’s a lost sale.

It’s also a legal topic. In the US, online stores are frequent targets of accessibility lawsuits under the Americans with Disabilities Act (ADA). In the EU, the European Accessibility Act has applied to online shops since June 2025. The usual benchmark in both cases is the Web Content Accessibility Guidelines (WCAG), level AA.

Partly. Shopify runs the checkout itself, and themes in the official Theme Store must meet accessibility requirements, including an average Lighthouse accessibility score of at least 90, keyboard access to every part of the page, visible focus and alt attributes on images.

But a store is more than its starting theme. Problems usually come from:

• Customisations to the theme code, often by different developers over time.
• Apps that inject pop-ups, reviews, upsells, chat and cookie banners.
• Content: product images without alt text, text baked into banner images, low-contrast colours chosen in theme settings.
• Themes from outside the Theme Store, which don’t go through Shopify’s review.

A Lighthouse score of 90 is also an automated check. It can’t tell you whether a screen reader user can actually pick a variant and add it to the cart.

1. Icon buttons with no name

Search, cart, account and close buttons that show only an icon. A screen reader announces “button”, so shoppers don’t know what it does. The fix is an accessible name, for example a visually hidden label or aria-label.

2. Low-contrast prices and badges

Light grey compare-at prices, pale sale badges and thin text on photos. WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text.

3. Product images without useful alt text

Empty or file-name alt text (“IMG_2041.jpg”) on product photos. Alt text is set per image in the Shopify admin, and the theme has to output it.

4. Variant pickers and quantity inputs

Custom swatches built from divs that a keyboard can’t reach, or that don’t say which option is selected. Quantity fields with no label.

5. Cart drawers, menus and pop-ups

Drawers that don’t move focus into themselves, can’t be closed with Escape, or let the keyboard wander behind them. Mega menus that open only on hover. Newsletter pop-ups that appear without warning and trap focus.

6. Slideshows that won’t stop

Auto-rotating hero banners with no pause button. WCAG requires a way to pause moving content that lasts more than five seconds.

7. Headings out of order

Section titles styled as headings but coded as plain text, or the other way round, so screen reader users can’t skim the page.

1. Run an automated scan. Our free scan checks your homepage, a product page, a collection and the cart against WCAG 2.2 AA rules.
2. Put your mouse away. Press Tab from the top of your homepage. Can you always see where you are? Can you open the menu, choose a variant, add to cart and reach checkout?
3. Zoom to 200% in your browser. Does anything overlap or disappear?
4. Try a screen reader. VoiceOver is built into Mac and iPhone; NVDA is free on Windows. Listen to a product page: are the name, price and buttons clear?

• Duplicate your theme first. In Online Store → Themes, duplicate the live theme and make changes there. Publish only after testing.
• Content fixes you can do yourself: alt text for product images, colours in theme settings, and putting banner text in real text instead of images.
• Code fixes: names for icon buttons, keyboard support for menus and swatches, focus handling in drawers and pop-ups, and heading structure. These live in the theme’s Liquid, CSS and JavaScript.
• Apps: check each app’s widgets with a keyboard. If one can’t be fixed from your theme, ask the app developer or consider an alternative.

Avoid “one-line” overlay widgets as the fix. They don’t change your theme code. See overlays vs real code fixes.

Every theme update, new app or new collection can bring new issues back. Re-scan after changes, and check the key pages at least monthly. Our Fix & Protect plan includes 3 months of weekly re-scans and monthly report so you don’t have to remember.