All industries » Shopify store accessibility
Shopify store accessibility: what fails and how to fix it for $149
Shopify stores carry the heaviest ADA Title III lawsuit exposure in e-commerce. Roughly 77 percent of the 4,187 federal accessibility cases filed in 2024 targeted online retailers (UsableNet 2024 Year-End Report). The pattern is consistent: a theme that passed visual design review ships WCAG 2.1 Level AA failures on color contrast, alt text, and variant selectors that an automated scanner catches in under a minute. This page covers what fails most often on Shopify stores, why it fails, and how to fix it without installing an overlay widget.
Short answer: the most common Shopify accessibility failures are color contrast on sale badges and call-to-action buttons (designer-chosen brand colors that fail 4.5:1), product image alt text that defaults to the file name or "image," variant selector buttons that are <div> elements with no role or label, carousel keyboard traps from theme apps, and add-to-cart flows that use non-button interactive elements. Fix the source code in your theme; do not install an overlay. Site Brace audits any Shopify store for $149 flat, with 12 re-scans included over 12 months. Try a free single-page check on your store first.
Why Shopify stores show up so often in ADA cases
Three structural reasons make Shopify the dominant target in e-commerce accessibility lawsuits.
- Scale. Roughly 5 million stores run on Shopify globally. Plaintiff-side attorneys file in volume against the entire e-commerce category, and Shopify is the largest single source.
- Themes inherit accessibility debt. Most stores run a popular paid or free theme (Dawn, Impulse, Prestige, Empire, etc.). When the base theme has a WCAG issue, every store running it has the same issue. One theme bug becomes thousands of lawsuit-eligible defendants.
- App ecosystem injects markup the store owner did not author. Reviews apps (Yotpo, Judge.me, Okendo), subscription apps (Recharge, Loop), upsell apps (Rebuy, ReConvert), and live-chat widgets all add their own HTML, CSS, and JavaScript at runtime. The store owner is liable for every line of it, even the lines they did not write.
The result is a target-rich environment for plaintiff-side firms. ADA Title III applies to commercial websites with a connection to a physical place of business under the 9th Circuit's Robles v. Domino's precedent, and that ruling has been cited in hundreds of e-commerce cases. Recent settlements have ranged from low five figures (a polite demand letter, agreed remediation, no court filing) to mid-six figures for stores that ignored the demand and ended up in court.
What we typically find on a Shopify store
Across the Shopify stores Site Brace has scanned, the same cluster of WCAG failures shows up in roughly this order of frequency. The first three are present on most stores; the rest depend on theme and apps installed.
| Finding | axe-core rule | Typical cause |
|---|---|---|
| Color contrast below 4.5:1 on buttons, sale badges, secondary text | color-contrast |
Designer-chosen brand colors that look good in mockups but fail the ratio |
| Product image alt text reads "image" or the file name | image-alt |
Product data import left alt empty; theme falls back to a placeholder |
| Variant selector buttons have no accessible name | button-name, aria-prohibited-attr |
<div> elements styled as buttons; sometimes with prohibited aria-label on a generic role |
| Carousel arrows are not keyboard-reachable or trap focus | focus-order-semantics, custom rules |
Slider apps that re-implement keyboard handling poorly |
Add-to-cart uses a clickable <div> instead of <button> |
button-name |
Theme customization that wraps the cart action in a div for styling |
| Cart drawer opens without proper dialog semantics | aria-dialog-name |
The cart drawer is a <div> popover without role="dialog" and a label |
| Live-chat widget hijacks keyboard focus | Manual finding (not always caught by axe) | Intercom, Drift, Gorgias, Tidio widgets that grab focus on injection |
| Promotional banner has color-only meaning | color-contrast, manual review |
"Free shipping" badge in a brand color that fails on its own background |
The fixes are concrete and live in your theme code or app settings, not in a runtime widget. A theme with corrected color tokens propagates the contrast fix to every page. A product import script that writes meaningful alt text propagates to every product. The work is real but bounded.
Shopify checkout, specifically
Shopify's hosted checkout (the pages on checkout.shopify.com after a shopper hits "Check out") is operated by Shopify and has its own accessibility profile. Shopify has invested in making the hosted checkout reasonably accessible; recent updates have closed several common failures. The lawsuit exposure on Shopify Plus stores using a custom checkout via Checkout Extensibility or older Checkout.liquid sites is different. If your store uses Checkout Extensibility apps, those apps inject markup that Site Brace can scan; if it uses pre-Extensibility Checkout.liquid, that checkout is fully your liability.
For stores still on Checkout.liquid (deprecated but in use), the most common findings are unlabeled form fields, color contrast on the order summary, and discount-code error messages that are not announced to screen readers.
Why an accessibility overlay is the wrong fix for a Shopify store
You will see Shopify App Store listings for accessibility overlays (accessiBe, UserWay, AudioEye, EqualWeb) priced at $39 to $99 per month. We have written about why accessibility overlays do not actually make sites WCAG-compliant in detail. The short version for Shopify specifically: the overlay loads after your theme renders, scans the rendered DOM, and injects ARIA attributes onto whatever elements it can reach. On a Shopify store with reviews apps, subscription apps, and upsell apps all also injecting markup, the overlay's runtime patches compete with app updates and often produce more aria-prohibited-attr violations than it fixes. The FTC fined accessiBe $1 million in April 2025 for marketing the kind of compliance claim the entire overlay category has been making. The honest fix is in your theme.
How Site Brace audits a Shopify store
A Site Brace audit covers up to 25 pages of your choosing. For a Shopify store, the standard mix is: homepage, two or three collection pages (your highest-traffic), three to five product detail pages (a mix of simple and variant-heavy products), cart, account, checkout-entry (the pre-Shopify-hosted page), and your top six to ten content pages (About, Contact, FAQ, Shipping, Returns, etc.). The audit runs axe-core 4.10 against each page, captures element-level screenshots of every contrast failure, and packages the findings into a written report with copy-paste fix code for each issue.
Pricing is $149 flat, one-time. The audit includes 12 re-scans you can run at any point in the next 12 months. That covers a typical theme update cycle (Shopify updates Dawn quarterly; many stores update less often) and gives you a way to verify each round of fixes without paying for a fresh audit.
To see what the report looks like, view a sample report we built for a fictional Shopify DTC apparel brand. The findings, the LLM prompts, and the verification steps are representative of what an actual Shopify store report contains.
Want to see the score on your own store first? Run a free single-page check on your homepage or your top-selling product page - one URL, about a minute, no signup needed to see the result.
Order an audit
If you have a developer or a Shopify partner agency, the audit findings translate directly into a fix list they can work through. If you are working solo, the report includes a copy-paste prompt for each finding that you can hand to Claude or ChatGPT to generate fix code for your specific theme.
Start a Shopify accessibility audit, $149
Related:
- Free single-page WCAG check - try Site Brace's scanner on any URL in about a minute
- Why accessibility overlays do not make sites WCAG-compliant
- axe-core vs WAVE vs Lighthouse - which engine to trust
- aria-label on a div: why screen readers ignore it