Shopify runs the core checkout, so most barriers live in your theme's product page, cart drawer and apps. Seven code-level fixes that make buying possible for everyone.
Shopify builds and maintains the core checkout pages itself, so most accessibility problems on the path to purchase come from your theme (product forms, variant pickers, the cart drawer) and your apps (upsells, reviews, pop-ups, checkout extensions). Fix those seven areas below and a keyboard or screen reader user can get from product page to payment. That's also the path plaintiff firms test first, since ecommerce is the most-sued sector for web accessibility.
This is general information, not legal advice.
| Part of the purchase path | Who controls the code |
|---|---|
| Product page, variant picker, quantity, add to cart | Your theme |
| Cart page and cart drawer | Your theme |
| Pop-ups, upsells, reviews, chat, loyalty widgets | App developers (you choose whether to install them) |
| Checkout pages (information, shipping, payment) | Shopify, plus any checkout UI extensions you add |
| Thank-you and order status pages | Shopify, plus apps and extensions |
You're still responsible for the whole experience. If an app blocks checkout for a screen reader user, "it's the app" won't help much. Test it, report it to the developer, and replace it if it isn't fixed.
Many themes build color and size swatches from <div>s, which keyboards can't reach and screen readers can't name. Use a radio group:
<fieldset>
<legend>Size</legend>
<input type="radio" id="size-s" name="size" value="S">
<label for="size-s">Small</label>
<input type="radio" id="size-m" name="size" value="M" checked>
<label for="size-m">Medium</label>
<input type="radio" id="size-l" name="size" value="L" disabled>
<label for="size-l">Large (sold out)</label>
</fieldset>
For color swatches, the label must include the color name, not just the color (WCAG 1.4.1 Use of Color, 1.3.1 Info and Relationships). Visually hide the radio if needed, but keep it in the page.
The plus and minus buttons are usually icons with no text:
<label for="qty">Quantity</label>
<button type="button" aria-label="Decrease quantity">−</button>
<input type="number" id="qty" name="quantity" min="1" value="1">
<button type="button" aria-label="Increase quantity">+</button>
When a product is added without a page reload, sighted users see the cart icon change. Screen reader users hear nothing. Add a polite live region and update its text:
<div id="cart-status" role="status" class="visually-hidden"></div>
document.getElementById("cart-status").textContent =
"Added to cart. Cart has 2 items.";
A slide-out cart is a modal. When it opens, move focus into it, keep Tab inside it, close it with Escape, and return focus to the button that opened it:
<button type="button" aria-haspopup="dialog" aria-controls="cart-drawer"
aria-expanded="false" id="cart-toggle">
Cart (2)
</button>
<div id="cart-drawer" role="dialog" aria-modal="true" aria-labelledby="cart-title" hidden>
<h2 id="cart-title">Your cart</h2>
<!-- line items -->
<button type="button" id="cart-close">Close cart</button>
</div>
Line items need names too. "Remove" repeated five times is meaningless, so use aria-label="Remove Linen Shirt, Medium".
Discount code, gift card and stock errors are often shown only in red text that screen readers never announce. Connect the message to the field and announce it:
<label for="discount">Discount code</label>
<input id="discount" aria-describedby="discount-error" aria-invalid="true">
<p id="discount-error" role="alert">This code has expired.</p>
This covers WCAG 3.3.1 Error Identification and 3.3.2 Labels or Instructions.
Sale prices in light gray, white text on pale "Sold out" badges, and ghost buttons are common contrast failures. Text needs 4.5:1 (WCAG 1.4.3). Button borders and icons need 3:1 (1.4.11). Most themes expose these colors in Theme settings > Colors, so you can often fix them without code.
Go through each installed app that appears on the storefront or in checkout and test it with a keyboard:
If an app fails, contact the developer with the specific WCAG criterion. Many fix issues quickly when asked. If they don't, find an alternative.
The Shopify App Store has many "ADA compliance" apps that add an overlay toolbar. They don't change your theme's code, so the barriers above stay in place. Stores running them are still sued. See why overlay widgets attract ADA lawsuits for the details, and our Shopify and WordPress compliance guide for theme-wide fixes beyond checkout.
Accessibility Shield scans your store's key pages weekly in a real browser, so JavaScript-rendered carts and app widgets are tested as customers see them. Each issue comes with the WCAG criterion and a code-level fix, plus a prompt you can paste into an AI coding tool to edit your theme. It also hosts an accessibility statement you can link from your footer. Try a free scan of your product page, or see plans.
Shopify maintains and tests its core checkout pages for accessibility. Your theme, apps and checkout extensions can still introduce barriers before and during checkout, and those are your responsibility.
Not directly on most plans. Shopify has replaced checkout.liquid with Checkout Extensibility, where customization happens through checkout UI extensions and branding settings. Make sure any extensions you install are accessible.
Overlay-style apps don't change your theme's code, so they can't fix the underlying issues. Use apps that help you find problems, then fix them in your theme.
Low-contrast text, missing alt text on product images, unlabeled variant swatches and quantity buttons, cart drawers that trap or lose keyboard focus, and pop-ups that can't be dismissed with the keyboard.
Your site is ADA compliant only if it meets the technical requirements of WCAG 2.1 AA and you can show a good‑faith effort to keep it that way.
Accessibility overlays don't fix your site's code, so the barriers plaintiffs scan for are still there. What the FTC, the courts and practitioners say, and what to do instead.
The European Accessibility Act has applied since June 2025. Here's whether your US SaaS or store is covered, who enforces it, how fines work, and a practical plan.