If you run a Shopify store, you've probably seen apps promising “ADA compliance” in one click. This guide explains, honestly, what your theme and those apps can and can't do, and gives you a checklist for finding and fixing the most common accessibility problems on a Shopify store.
Not legal advice. We test websites against the Web Content Accessibility Guidelines (WCAG). We're not lawyers, and nothing here says what any law requires of your store. For legal questions, talk to a qualified attorney.
What “ADA compliance” means for a Shopify store
The Americans with Disabilities Act (ADA) is a US civil rights law. How it applies to a particular website is a legal question. What people usually mean in practice is the technical side: can customers who use a keyboard, a screen reader, magnification or voice control find products, choose options, and check out? The usual yardstick for that is WCAG, published by the W3C, currently version 2.2 at Level AA.
No app, theme or audit can certify that a store is “compliant”. What you can do is find real barriers and fix them, and keep checking as your store changes.
What your theme controls
Most of what customers experience comes from your theme: the header and menu, product cards, the product form with its variant pickers, the cart drawer, and pop-ups. A good theme is the biggest single head start you can get.
- Theme Store themes have a baseline. Shopify's Theme Store requirements include keyboard access with visible focus, alt attributes on images, labelled form inputs, 4.5:1 text contrast, and a minimum average Lighthouse accessibility score of 90 across the home, product and collection pages. That's a useful floor, not a guarantee: Lighthouse is automated and can't judge everything.
- Customizations can undo it. Changing colors, adding custom code, or installing sections from apps can introduce new problems. Re-test after big changes.
- Third-party and older themes vary. If your theme didn't come from the Theme Store, test it with the checklist below before assuming anything.
What accessibility apps and overlays can and can't fix
Many “ADA compliance” apps in the Shopify App Store are accessibility overlay apps: they add a toolbar or script on top of your storefront. They may let a visitor enlarge text or change colors, and some try to patch code automatically.
- They can't write good alt text for you. Only you know that a product photo shows “navy linen shirt, front view, sleeves rolled”.
- They can't reliably fix custom widgets. A variant picker, size chart or cart drawer that doesn't work with a keyboard needs its code fixed.
- They don't change your theme. The underlying problems stay in the code that screen readers read.
Apps that help you find problems, or that fix one narrow thing in your theme code, can be worthwhile. Be cautious of any app that promises compliance or protection from legal claims.
A Shopify accessibility checklist
Product images
- Add alt text in Products → [product] → Media: click an image and use “Add alt text”. Describe what matters for buying: color, style, what's shown.
- Don't repeat the product title word for word on every image; say what's different about each view.
- Images that are purely decorative, like background patterns in a banner section, can have empty alt text.
Variant pickers and the product form
- Every option group (size, color) needs a visible name that a screen reader also announces.
- Color swatches need a text name, not just a color (WCAG 1.4.1 Use of Color).
- Choosing an option shouldn't jump the page or move focus unexpectedly.
- “Sold out” and price changes should be shown in text, not only by graying something out.
Cart and cart drawer
- When “Add to cart” opens a drawer, focus should move into it, Esc should close it, and focus should return to the button.
- Quantity buttons need names like “Increase quantity for Linen shirt”, not just “+”.
- The cart count change should be announced, or at least be easy to find.
Checkout
Checkout is run by Shopify, and on most plans you can't change its code. Test it anyway with a keyboard. If you find a problem, report it to Shopify support, and check that anything you can control, such as checkout branding colors, keeps enough contrast.
Forms, pop-ups and banners
- Newsletter and contact forms need visible labels and clear error messages. See our form accessibility best practices.
- Email pop-ups must be closable with the keyboard and shouldn't trap focus.
- Announcement bars and sliders that move need a pause control.
Content
- Use real headings in pages and blog posts, in order.
- Write link text that makes sense alone: “Shipping and returns policy”, not “click here”.
- Don't put important text, like sale terms, inside images.
How to test your store in 15 minutes
- Scan your product page. Scan your product page with our free checker, or use WAVE or Lighthouse. Fix the clear-cut items first.
- Shop with only a keyboard. From the home page, use Tab, Enter, Space and the arrow keys to find a product, pick a size and color, add it to the cart, and reach checkout. Can you always see where you are?
- Listen to one product page. Turn on VoiceOver (Mac or iPhone) or NVDA (Windows). Are the images, options and price announced clearly? Our guide to manual accessibility testing has the commands.
- Zoom to 200%. Nothing should overlap or be cut off, including the cart drawer.
- Write down what you find, page by page, so it can be fixed and re-checked.
When to get help
If the checklist turns up problems in your theme code, such as a variant picker or cart drawer that doesn't work with a keyboard, a developer familiar with Liquid can usually fix them at the source. We can audit your key pages and then make the fixes in a fixed-price accessibility remediation Fix Sprint.