Shopify store accessibility checklist

An area-by-area checklist for a more accessible Shopify store: theme, alt text, colors, headings, forms, pop-ups, apps, your statement and testing.

By Accessibility Helper teamPublished October 15, 20268 min read

Most accessibility problems on a Shopify store come from the theme settings, content, code changes and apps you add, not from Shopify’s checkout. Work through this checklist one area at a time, from your theme to testing with a keyboard and a screen reader, and fix what you find in the Shopify admin, the theme editor or theme code. Each item names the WCAG 2.2 success criterion it relates to, so you can work toward Level AA.

What does Shopify handle, and what’s up to you?

Shopify controls most of the checkout. It publishes an accessibility conformance report for Shopify Checkout, dated March 2026, against WCAG 2.2 Levels A and AA. It lists a few criteria as only partially supported. You can’t change those yourself, but you can test checkout with a keyboard and report problems to Shopify.

Everything before checkout is yours: the theme and its settings, your product photos and descriptions, your pages, and every app that adds something to your storefront.

Is your theme a good starting point?

Themes in the Shopify Theme Store must meet accessibility requirements, including “a minimum average Lighthouse accessibility score of 90” across product, collection and home pages, keyboard access to all parts of a page and a visible focus state. That’s a sensible floor, not a promise that every page works. A score is an automated measure, and your settings, content and code changes all affect the result.

Try the theme’s demo store with only a keyboard before you buy it. Can you reach the menu, open dropdowns, choose a variant and add to cart?
Every link and button shows a visible outline when it has keyboard focus (2.4.7 Focus Visible, Level AA).
A “Skip to content” link appears the first time you press Tab, a common way to meet 2.4.1 Bypass Blocks, Level A).
If a developer has edited your theme code, re-test what they changed.

Do your images have alt text?

Every image that carries information needs a text alternative (1.1.1 Non-text Content, Level A). On a store, that’s mostly product photos.

Product media: Products › select a product › click a media item › Add alt text › Save alt text.
Theme images such as banners: Online Store › Edit theme › select the section › on the image, click Edit › enter the alt text › Save.

Write what a shopper needs to know, not a file name or a list of keywords:

Bad:  IMG_4471.jpg
Bad:  linen shirt mens shirt summer shirt buy shirt
Good: Men's linen shirt in sage green, worn open over a white T-shirt

If a banner image contains text, such as “Summer sale: free shipping”, put the same words in the alt text, or better, use real text in the section. Our guide on how to write alt text covers decorative images and other tricky cases.

Do your theme colors have enough contrast?

Text needs a contrast ratio of at least 4.5:1 against its background, or 3:1 for large text, which WCAG defines as at least 18 point or 14 point bold (roughly 24px or 18.5px) (1.4.3 Contrast (Minimum), Level AA). Input borders, icons and other parts of controls need 3:1 against the colors next to them (1.4.11 Non-text Contrast, Level AA).

Most current themes manage colors as color schemes: Online Store › Edit theme › click the settings icon › Colors.

Check every scheme: text on background, button labels on button colors, links, and sale or sold-out badges.
Check text placed over images or video, such as slideshow headings. Use your theme’s overlay setting if it has one.
Watch light gray text for prices, compare-at prices and small print.

If you’d rather not check every page by hand first, an automated audit is a quick way to find low-contrast text, missing alt text and unlabeled buttons. CodeInspire Accessibility Tool, the Shopify app made by CodeInspire, which publishes this site, does that on its Pro plan and tags each fix with where you make it: Shopify admin, Theme editor or Theme code.

For Shopify stores

Find and fix accessibility issues on your store

CodeInspire Accessibility Tool adds an accessibility widget for your shoppers, audits your pages against WCAG, and gives you step-by-step fixes for your Shopify admin, theme editor or theme code.

Get it on the Shopify App Store What the app does

Are your headings in a logical order?

Many screen reader users jump between headings to find their way around a page. Headings need to reflect the page’s structure (1.3.1 Info and Relationships, Level A) and describe their section (2.4.6 Headings and Labels, Level AA).

One main heading per page, usually the product, collection or page title.
Don’t choose a heading level for its size. In the rich text editor, Shopify recommends keeping headings in order without skipping levels.
Section headings in the theme editor should say what the section is (“New arrivals”), not “Don’t miss out”.

Do your links and buttons say what they do?

A link’s purpose should be clear from its text, or from its text and context (2.4.4 Link Purpose (In Context), Level A). Icon-only buttons still need a name that assistive technology can read (4.1.2 Name, Role, Value, Level A).

Replace “Click here” and rows of identical “Shop now” buttons with “Shop linen shirts” or “Shop summer dresses”.
Cart, search, account and menu icons need accessible names. If a screen reader announces only “button” or “link”, that’s a theme code fix:

<a href="/cart" aria-label="Cart, 2 items">
  <svg aria-hidden="true" focusable="false">...</svg>
</a>

Make touch targets at least 24 by 24 CSS pixels, or space them out enough (2.5.8 Target Size (Minimum), Level AA).

Do product options rely on color alone?

Color swatches are a common failure. If color alone tells “Sage” from “Olive”, or shows which swatch is selected, shoppers with color blindness or low vision miss it (1.4.1 Use of Color, Level A).

Show the selected option’s name as text next to the swatches, for example “Color: Sage”.
Mark the selected swatch with more than a color change: a thicker border, a check mark or an underline.
Say “Sold out” in text, not only with a grayed-out or crossed-out swatch.
Swatches should be real form controls, such as radio buttons with labels, that work with a keyboard.

Are your forms labeled?

Newsletter sign-ups, contact forms and search boxes often use placeholder text instead of a label. Placeholder text disappears as soon as someone starts typing, so it can’t do a label’s job. Every field needs a label (3.3.2 Labels or Instructions, Level A), and errors need to be described in text (3.3.1 Error Identification, Level A).

Before:

<input type="email" placeholder="Email">

After:

<label for="footer-email">Email address</label>
<input type="email" id="footer-email" name="contact[email]" autocomplete="email">

Check the footer newsletter block, the contact page and the search field. If your theme hides the label visually, it must still be there in the code.

Do your videos have captions?

Prerecorded video with sound needs captions (1.2.2 Captions (Prerecorded), Level A). Audio that plays automatically for more than 3 seconds needs a way to pause or stop it, or to control its volume separately (1.4.2 Audio Control, Level A).

Add captions to brand, how-to and review videos. Video hosts such as YouTube and Vimeo let you add them; check automatic captions for errors.
Keep background videos muted, and give them a pause button.

Do pop-ups, announcement bars and slideshows let people stay in control?

Anything that moves, blinks or scrolls automatically for more than five seconds alongside other content needs a way to pause, stop or hide it (2.2.2 Pause, Stop, Hide, Level A). That includes rotating announcement bars and auto-playing slideshows.

In the theme editor, look for an auto-rotate or autoplay setting on slideshow and announcement bar sections. Turn it off, or check that the theme shows a pause button.
Pop-ups for newsletters, discounts or age checks: keyboard focus should move into them, a visible close button should work from the keyboard, and focus should return to where it was.
Nothing traps the keyboard: you can always Tab or close your way out (2.1.2 No Keyboard Trap, Level A).
Sticky headers, chat bubbles and cookie banners don’t completely hide the element that has focus (2.4.11 Focus Not Obscured (Minimum), Level AA).

Are your apps adding barriers?

Every app that adds something to your storefront becomes part of your store: review widgets, chat bubbles, upsell pop-ups, size charts, wishlist buttons, cookie banners. Even Shopify’s checkout report notes that payment buttons supplied by PayPal, Venmo and Amazon Pay “may generate barriers to access”.

Test each app’s storefront features with a keyboard and a screen reader after you install it.
Ask the developer how they test accessibility and whether they publish a conformance report.
Remove apps you no longer need.

Have you published an accessibility statement?

An accessibility statement tells shoppers which standard you aim for, what you know doesn’t work yet and how to reach you. Create it under Online Store › Pages › Add page, then add it to your footer menu under Content › Menus. Our accessibility statement guide has a template. If you sell to EU consumers, also read what the European Accessibility Act expects. CodeInspire Accessibility Tool includes a statement editor with a ready-made statement that shoppers can open from its widget.

How should you test your store?

Test the path a shopper takes: home page, a collection, a product, add to cart, the cart and on into checkout.

Keyboard. Use only Tab, Shift+Tab, Enter, Space and the arrow keys. You should always see where focus is and be able to reach and use everything. Our keyboard accessibility guide walks you through it.
Zoom. Zoom your browser to 200%. Text should still be readable and nothing should be cut off (1.4.4 Resize Text, Level AA). In a window 320 CSS pixels wide, content should reflow without sideways scrolling (1.4.10 Reflow, Level AA).
Screen reader. VoiceOver is built into Mac and iPhone, and NVDA is a free screen reader for Windows. Check that product names, prices, variant choices and the add-to-cart button are announced clearly.
Automated audit. Lighthouse in Chrome’s developer tools quickly finds failures such as missing alt attributes, low contrast and unnamed buttons. The CodeInspire Accessibility Tool audit runs the same Lighthouse checks on your home, product, collection or cart page, on mobile or desktop, and adds Shopify fix steps for each failing check. See what the app does.

What do automated checks miss?

W3C notes that “tools cannot check all accessibility aspects automatically” and that “human judgement is required.” An audit can tell you an image has alt text, not whether the alt text is right. It won’t notice confusing headings, a pop-up that traps focus only in some cases, a focus order that jumps around, or wrong captions. Lighthouse’s score counts only the checks it runs, and a page “doesn’t get points for partially passing an accessibility audit”. So a score of 100 is a good sign, not the finish line.

That’s also why no app makes a store compliant, including ours. The widget gives shoppers adjustment tools, and the audit points you to the fixes. Making the fixes and testing by hand is still your job.

Frequently asked questions

Is Shopify accessible out of the box?

Partly. Shopify runs most of the checkout and publishes an accessibility conformance report for it, and themes in the Shopify Theme Store must meet accessibility requirements, including a minimum average Lighthouse accessibility score of 90. Your content, theme settings, code changes and apps can still add barriers, so you need to check your own store.

Can I fix accessibility problems in Shopify checkout myself?

Mostly not. Checkout is largely controlled by Shopify, which publishes a conformance report for it against WCAG 2.2 Levels A and AA. You can still test checkout with a keyboard and report problems to Shopify, and you control the pages before it and the payment and checkout apps you add.

Will an accessibility app make my Shopify store compliant?

No app can do that on its own. A widget gives shoppers adjustment tools, and an audit helps you find issues. You still have to fix those issues in your theme, content and apps, and test by hand with a keyboard and a screen reader.

How do I add alt text to product images in Shopify?

In your Shopify admin, go to Products and open a product. Click a media item to open its preview, click Add alt text, enter a description of the image and click Save alt text.