Web accessibility on Shopify means designing the storefront so that buyers with disabilities — visual, motor, cognitive, hearing — can browse, evaluate, add to cart, and complete checkout independently. The standard most regulators reference is WCAG 2.1 Level AA — the World Wide Web Consortium's Web Content Accessibility Guidelines. Most Shopify stores fail at least 8–15 WCAG items, almost always inherited from the theme rather than introduced deliberately.

This guide walks through the practical audit that catches the failures most likely to (a) exclude real customers and (b) trigger an ADA complaint. It is not legal advice; consult counsel for your jurisdiction.

Why accessibility matters operationally

The framing most accessibility articles use is legal compliance. That's part of it. The bigger story is that accessibility failures exclude meaningful percentages of buyers:

  • Visual impairment: ~3% of US adults have low vision; ~0.4% are blind. Visually impaired shoppers are a growing online demographic, often loyal to stores they can navigate.
  • Motor impairment: ~5% have significant difficulty using a mouse. Keyboard-only navigation matters.
  • Color blindness: 8% of men, 0.5% of women have some form of color vision deficiency. CTAs that rely on color alone exclude them.
  • Cognitive load: Most accessibility improvements (clearer labels, simpler forms, predictable navigation) help all users, not just users with documented disabilities.

The conversion-rate impact of accessibility improvements is rarely isolated, but stores that have done full audits report 2–5% lifts in checkout completion — most of which is attributed to clearer UI and better keyboard handling for all users.

The legal landscape (briefly)

In the US, Title III of the Americans with Disabilities Act (ADA) has been interpreted by federal courts to apply to commercial websites. Lawsuits against ecommerce stores have grown sharply since 2018, with thousands filed annually. Settlements typically range from $5K–$50K plus mandated remediation.

In the EU, the European Accessibility Act (effective June 2025) requires consumer-facing ecommerce sites to meet WCAG 2.1 AA, with enforcement and fines varying by member state.

In the UK, the Equality Act 2010 has similar implications.

In Canada, AODA (Accessibility for Ontarians with Disabilities Act) and similar provincial regulations apply.

The practical takeaway: most jurisdictions converging on WCAG 2.1 AA as the standard. Build to that, and you're compliant in most places.

The 12-item Shopify accessibility audit

Walk through each of these on your live storefront. A failure on any one is fixable; doing all 12 puts you ahead of 90% of Shopify stores.

Item 1: Alt text on every product image

Every <img> tag should have descriptive alt="" text. For product images: describe what the product looks like, including key features. For decorative images: alt="" (empty, intentionally — tells screen readers to skip).

Shopify's image upload UI has an "alt text" field. Most stores leave it blank. Audit: open every PDP and check the alt text on the hero image. If it's "image-1.jpg" or empty when it should describe the product, fix.

Item 2: Color contrast on text and CTAs

Body text needs 4.5:1 contrast ratio against the background. Large text (18pt or 14pt bold) needs 3:1. CTAs need 3:1 for text-on-button.

Common Shopify failures: light gray placeholder text in form fields, light gray "secondary" buttons, white text on faded hero overlays.

Test: install the WAVE browser extension or axe DevTools, run on your homepage and PDP. Both flag contrast failures with exact ratios.

Item 3: Form labels (visible and screen-reader-accessible)

Every form input must have an associated <label>. Placeholder text alone is not a label — it disappears when the user types and isn't read aloud by screen readers.

Common Shopify failures: checkout forms with floating-label themes that visually hide the label after typing; newsletter signup forms where placeholder text is the only label.

The fix: ensure every input has a <label for="input-id"> (or aria-label if the design genuinely can't show a visual label).

Item 4: Keyboard navigation through the cart and checkout

Press Tab from the homepage. Walk through the entire purchase flow using only your keyboard. Can you:

  • Move through the main nav?
  • Open and close the search?
  • Open the cart drawer?
  • Update cart quantities?
  • Proceed to checkout?
  • Complete checkout?

Most Shopify stores fail one of these — typically the cart drawer (modal that traps focus poorly) or a custom variant selector (button group that isn't keyboard-navigable).

Item 5: Focus indicators visible on all interactive elements

When you Tab to a button or link, can you see clearly that it's focused? Most browsers show a default focus ring; many themes deliberately remove it (outline: none) without replacing it.

The fix: if the theme suppresses the default focus ring, add a custom :focus-visible style with a clear outline (2px solid, contrasting color).

Item 6: Heading hierarchy

Pages should have a logical heading structure: one <h1> per page, then <h2> for major sections, <h3> for subsections, etc. Screen reader users navigate by heading level.

Common failures: PDPs where the product title is <h2> instead of <h1>; collection pages with no <h1>; blog posts where every heading is <h3> because that matched the theme's font size.

Item 7: Meaningful link text

Links should describe their destination. "Click here" and "Read more" don't.

Common Shopify failures: blog index pages with "Read more" on every article; "Click here" on terms-and-conditions links; product cards where the only text on the link is "View".

The fix: use descriptive link text — "Read more about [post title]" or visually hidden text via <span class="visually-hidden"> to add context for screen readers.

Item 8: Video and audio captions

Any product video, hero video, or testimonial video needs captions. Auto-generated captions (YouTube's auto-CC) are an acceptable starting point but should be reviewed for accuracy.

Common Shopify failures: hero background videos with no captions (often the brand says "we don't need captions on a decorative video" — incorrect if there's any audio content).

Item 9: Buttons vs. links

Use <button> for actions ("Add to cart", "Subscribe"). Use <a> for navigation (links to other pages or sections). Common Shopify mistake: "Add to cart" implemented as <a href="#"> ... </a> with JavaScript intercepting the click.

The semantic difference matters for screen readers — buttons announce as buttons; links announce as links.

Item 10: Error messages on form validation

When a form fails validation, the error message must:

  • Be programmatically associated with the field (via aria-describedby or in the same fieldset).
  • Use clear language ("Email address is required" not "Field invalid").
  • Not rely on color alone (red text + an icon, not just red).

Common Shopify failures: checkout error states where the error message appears as a tooltip that's invisible to screen readers; or as red text only with no other indicator.

Item 11: Cart drawer and modal accessibility

Modals (cart drawer, quick-view, popups) need:

  • Focus trap: keyboard focus stays within the modal until closed.
  • Escape closes the modal.
  • Focus returns to the element that opened the modal.
  • aria-modal="true" and an aria-label on the dialog.

Most Shopify themes' cart drawers fail one or more of these. Test by opening the cart with keyboard, tabbing through, and checking if focus escapes.

Item 12: Skip-to-content link

A "Skip to main content" link should be the first focusable element on every page. It lets keyboard users skip over the nav to the page content. Visually, it can be hidden until focused.

Most themes don't include this by default. Add it.

Tools that catch most issues automatically

Three tools, in order of usefulness:

Tool 1: WAVE (free)

Web Accessibility Evaluation Tool. Browser extension. Run on any page; it overlays icons on accessibility issues with explanations. Catches: alt text, contrast, heading order, form labels, ARIA issues.

Tool 2: axe DevTools (free, paid tier)

Run as a Chrome extension. Generates a report of issues with severity ratings and remediation advice. Better than WAVE for technical detail; comparable for simple checks.

Tool 3: NVDA or VoiceOver (free, manual testing)

Actual screen readers. Free on Windows (NVDA) and macOS (VoiceOver). 20 minutes navigating your store with a screen reader catches issues automated tools miss — particularly form flows, cart interaction, and announcement clarity.

Run automated tools first, fix what they catch, then do a manual screen reader walk-through.

Accessibility apps and overlays — the controversy

You'll see Shopify apps marketed as "one-click ADA compliance" — accessiBe, UserWay, Equally AI, and similar. These are accessibility overlays that inject a JavaScript widget which (claims to) fix accessibility automatically.

The disability advocacy community has documented that overlays:

  • Do not actually fix most issues. Auto-detection misses 70%+ of WCAG failures.
  • Often introduce new issues. The overlay's UI itself can be inaccessible.
  • Have not protected stores from ADA lawsuits. Multiple cases have proceeded despite overlay installation.

Overlays cost $40–$1,500/month and provide false security. The honest path is: audit, remediate, then maintain. Overlays are not a substitute.

Common Shopify accessibility mistakes

  • Assuming the theme is accessible. Most themes are mostly accessible but not fully. Audit before launch.
  • Removing focus rings without a replacement. A common designer move that excludes keyboard users.
  • Using color as the only error indicator. Red text alone doesn't signal "error" to a color-blind user. Add an icon or text.
  • Hiding labels on hover-state forms. Labels must be persistent or correctly tied via aria-label.
  • Buying an accessibility overlay and considering the work done. It isn't.
  • Skipping alt text "because it's automated by AI now." AI-generated alt text catches major content but misses brand-specific details ("white t-shirt with the brand's logo on the chest"). Review and edit.
  • Forgetting accessibility on emails. Marketing emails should also have alt text on images, sufficient color contrast, and use semantic HTML.
  • Not testing on real devices with assistive tech. The 20-minute manual walk-through catches what automation misses.

Frequently asked questions

What WCAG level should a Shopify store target?

WCAG 2.1 Level AA. This is the standard most regulations (ADA in practice, EU EAA, UK Equality Act, AODA in Canada) reference. Level AAA is stricter than most regulators require and impractical to maintain across a full ecommerce site.

How do I run an accessibility audit on Shopify?

Use the WAVE browser extension and axe DevTools to run automated scans on your homepage, a PDP, the cart, and the checkout. Fix what they find. Then do a 20-minute manual walk-through with NVDA (Windows) or VoiceOver (macOS) to catch the issues automation misses. Budget ~6–10 hours for a complete first audit.

Are accessibility overlays a real solution?

No. Overlays like accessiBe and UserWay don't fix the underlying issues, often introduce new accessibility problems, and have not consistently protected merchants from ADA lawsuits. Real remediation is the only durable answer.

How much does Shopify accessibility remediation cost?

For a typical Shopify store, $2K–$15K of work with a developer or accessibility consultant catches the major issues. High-customization stores or headless setups can run $20K+. Most issues are theme-level and fixable in dev hours, not costly redesigns.

Will I be sued if my Shopify store isn't accessible?

ADA lawsuits target ecommerce sites at increasing rates — thousands per year in the US. Settlements typically include monetary damages plus mandated remediation. Risk varies by visibility (high-traffic stores are more often targeted), category (apparel, footwear, food are common), and jurisdiction. Don't rely on obscurity; audit and fix.

Does Shopify check accessibility for me?

No. Shopify's own admin and merchant-facing tools have improved meaningfully on accessibility, but your storefront's accessibility is your responsibility — based on your theme, customizations, apps, and content choices.

Key takeaways

  • WCAG 2.1 Level AA is the standard regulators converge on. Build to that.
  • Three failures cause most ADA complaints: missing alt text, low contrast, keyboard-inaccessible forms. Fix these three first.
  • Use WAVE + axe DevTools for automated scans. Add a 20-minute manual screen-reader walk-through for what automation misses.
  • Accessibility overlays are not a solution. They cost money, miss most issues, and don't protect against lawsuits.
  • The audit covers 12 items: alt text, contrast, form labels, keyboard nav, focus indicators, heading hierarchy, link text, video captions, button vs. link semantics, error messages, modal accessibility, skip-to-content link.
  • Remediation cost is typically $2K–$15K for a typical Shopify store. Most issues are theme-level dev work, not redesign.
  • Accessibility lifts conversion 2–5% on average — most users benefit from clearer UI, not just users with documented disabilities.
  • A weekly action plan from DropifyXL doesn't audit accessibility automatically, but flags PDP issues (broken images, incomplete metadata) that often correlate with accessibility gaps.

Accessibility is the rare optimization that's good for users, good for compliance, good for SEO (Google rewards good HTML semantics), and good for conversion. The only barrier is that it's invisible to most operators until something breaks. Audit annually; remediate as you go.