Shopify accessibility — the practical guide

Pick (or audit) an accessible theme

Shopify's own themes (Dawn, Craft, Sense, Studio) are built with accessibility in mind and pass axe-core cleanly on a fresh install. Most paid third-party themes from the Shopify Theme Store do not — contrast fails, focus-visible resets, and missing ARIA on custom UI are the top-three common issues.

Before buying a paid theme, scan the live preview. A clean pass on the demo store reduces remediation cost by 80-90%. Don't trust the theme marketing page that says "WCAG compliant" — run axe-core against it.

Product pages — the single biggest lawsuit surface

Plaintiff's law firms scan hundreds of product pages in a single investigation. The violations that come up most often:

• Product images without alt text.Shopify's admin lets you upload product images without an alt field — so it's easy to accumulate thousands over time. Train your ops / content team to alt-text every uploaded image.
• Variant selectors that don't announce state. Colour swatches and size pickers often use <div> with click handlers and no role="radio" / aria-checked. Screen readers can't tell which option is selected.
• Low-contrast "SALE" / "SOLD OUT" badges on top of product photos. Contrast requirements apply to overlaid text too.
• Image zoom / lightbox galleries with no keyboard close, no focus trap, no alt text on zoomed images.
• "Add to cart" confirmation messagesthat only appear as a toast — no ARIA live region means screen-reader users don't know the action succeeded.

Checkout customisation and its limits

Shopify's hosted Checkout (Checkout Extensibility) is maintained by Shopify and audited regularly. If you're on Basic / Shopify / Advanced, your checkout inherits Shopify's accessibility. This is actually a compliance advantage — one fewer surface to audit.

Risk points:

• Checkout UI extensionsyou or a partner app install — these are your responsibility. Each extension's UI should be audited individually.
• Shopify Plus custom checkouts(pre-extensibility) on legacy Liquid checkout.liquid — these are fully your responsibility and often accumulate accessibility debt. If you're still on the old checkout, migrate to Checkout Extensibility.
• Post-purchase upsell apps (ReCharge, Bold Upsell, etc.) — check each for ARIA and keyboard support before install.

Collection + search pages

The category / collection pages are typically auto-generated from the theme template. Common failures:

• Product tiles without a visible focus state when tabbed.
• Infinite-scroll pagination without ARIA announcement when new items load.
• Faceted filter UIs (price slider, size filters) not keyboard-operable.
• "Quick view" modals that don't trap focus.
• Empty-state messages not announced via live region.

Apps are where things break

Every app that injects UI into your storefront — reviews widgets, loyalty popups, size-guide modals, chat widgets, and (ironically) accessibility overlays — is a separate failure surface. Before installing:

1. Install on a development theme.
2. Run axe-core against a page the app modifies.
3. If violations appear, ask the app vendor if they're WCAG compliant; if they say "we use an overlay", that's a red flag — not a solution.
4. Budget remediation time if you're going to keep the app anyway.

Specifically: do not install accessibility overlay apps (accessiBe Shopify, UserWay Shopify, EqualWeb Shopify). See Why accessibility overlay widgets don't work.

Scanning at scale — catalog-wide

A single axe-core scan catches ~95% of accessibility issues on the page it scans. For a store with thousands of product pages, you need to sample intelligently:

• Scan one product from each theme template variant (simple product, with-variants, bundle, subscription).
• Scan one collection page, one search results page, one empty search result.
• Scan the cart, mini-cart drawer, and each checkout extension.
• Scan the account area (login, register, order history).

Once the theme passes across those ~15 representative pages, the rest of the catalog tends to inherit the fixes. Add axle to the theme repo's CI (if you manage it via a Git-linked theme workflow) so any template change that regresses accessibility fails before ship.

Accessibility statement placement

Shopify stores typically publish an accessibility statement as a Page (under Online Store → Pages) and link to it from the footer. Hebrew / EU-language versions can be added as locale-specific Page copies.

axle's statement generator produces HTML you can paste directly into a Shopify Page. For EAA compliance with multiple EU markets, each localised version should contain the appropriate regulatory escalation channel.