Shopify WCAG accessibility guide for store owners

Shopify accessibility WCAG compliance is now a baseline expectation, not a nice-to-have. The Web Content Accessibility Guidelines define how your storefront should work for shoppers using screen readers, keyboard navigation, magnification, and assistive tech. Get this wrong and you face two real costs: lost customers and lawsuits.

ADA web lawsuit filings hit 4,605 in 2023 in the US alone, and Shopify stores show up on those dockets every month. In Europe, the European Accessibility Act came into force on 28 June 2025, putting most ecommerce businesses serving EU consumers under direct regulation.

This guide walks through the parts of WCAG 2.1 that actually matter for a Shopify store. No legalese. Just the checks you can run today and the fixes that move the needle.

WCAG 2.1 levels: A, AA, AAA

WCAG 2.1 has three conformance levels. Level A is the absolute minimum. Level AA is the legal target most courts and regulators reference. Level AAA is the gold standard, rarely required across a whole site.

For a Shopify store, aim for WCAG 2.1 AA across product pages, collection pages, cart, and checkout. That single target covers roughly 95% of legal risk and matches what the DOJ, EAA, and most class-action plaintiffs cite.

Level A only blocks the worst failures: no alt text at all, no keyboard access, content that triggers seizures. Level AA adds contrast ratios, resizable text, consistent navigation, and visible focus indicators. Level AAA pushes contrast to 7:1 and demands sign language video for prerecorded content. Most stores skip AAA on purpose.

Color contrast requirements

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 between text and background for normal text, and 3:1 for large text (18pt regular or 14pt bold and up). The same 3:1 rule applies to UI components like buttons, form borders, and icon-only controls.

Most Shopify themes ship with a default palette that passes for body copy but fails on secondary elements: light gray placeholder text, faded “out of stock” labels, low-contrast quick view buttons. Run every text and button color pair through our free contrast checker before you ship a theme update.

The most common Shopify failures are: light gray on white sale prices, ghost buttons with no border, hover states that disappear into the background, and accent colors on top of product image overlays. Fix the palette once at the theme level instead of patching one section at a time.

Alt text for product images

Every product image needs alt text. Shopify stores it per image in the admin, but most merchants leave it blank or paste in the product title 47 times. Both fail WCAG 1.1.1 in different ways: blank alt is invisible to screen readers, duplicate alt is noise.

Good product alt text describes what the image shows that the title does not. “Olive linen shirt, front view, untucked, model wearing dark jeans” beats “Olive linen shirt” five times in a row. For variant images, include the color or material so a screen reader user can tell two swatches apart.

If your store relies on color or pattern to communicate variant differences, your accessibility job gets harder. The Shopify color swatches complete guide covers how to label and describe swatches so they pass WCAG 1.4.1 (use of color).

Keyboard navigation

WCAG 2.1.1 says every interactive element must work with a keyboard. Tab through your homepage right now. Can you reach the menu, the search bar, every product card, the cart drawer, and the checkout button without a mouse? Can you see where focus is at all times?

Common Shopify keyboard failures include: hover-only mega menus, custom dropdowns built without ARIA roles, modal popups that trap focus or release it to the wrong place, and quick-add buttons that fire on click but not on Enter. Cart drawers built by third-party apps are some of the worst offenders.

The fix is usually a small set of theme edits: add visible focus rings, replace pure CSS hovers with click handlers, and audit any app that injects its own UI. Themes from the Shopify Online Store 2.0 era handle keyboard nav better out of the box than older Vintage themes.

Form labels and errors

Forms are the second biggest source of accessibility complaints after color contrast. WCAG 1.3.1 and 3.3.2 require that every input has a programmatic label, and that error messages identify both the field and the problem.

Placeholder text is not a label. A field that only shows “Email” inside the input disappears the moment a shopper starts typing. Use a real <label> element associated with the input via the for attribute, even if you visually hide it. Shopify checkout already does this. Custom contact forms and newsletter popups often do not.

Error messages should appear inline next to the broken field, reference the field by name, and be announced to screen readers via aria-live. “Please enter a valid email address” tied to the email input passes. A red border with no text fails.

ADA lawsuit risk for Shopify stores

Title III of the Americans with Disabilities Act has been applied to ecommerce sites by US courts since the 2019 Domino’s Pizza ruling. Plaintiffs do not need to prove harm. They only need to show that a screen reader user could not complete a purchase.

The typical Shopify ADA demand letter cites missing alt text, low color contrast, unlabeled form fields, and inaccessible cart drawers. Settlements run from $5,000 to $50,000 plus a remediation deadline. Repeat targets exist: a handful of law firms file hundreds of cases per year against ecommerce stores.

Insurance does not always cover these claims. The cheapest defense is a real WCAG 2.1 AA audit and a documented remediation plan. Even partial conformance plus good faith effort weakens a plaintiff’s case.

European Accessibility Act 2025

The European Accessibility Act (Directive 2019/882) became enforceable across EU member states on 28 June 2025. It covers ecommerce services sold to EU consumers, including Shopify stores based outside the EU that ship to European customers.

The technical baseline is EN 301 549, which maps almost one-to-one onto WCAG 2.1 AA. Microenterprises (under 10 employees and under €2M turnover) are exempt from the service provisions, but most growing Shopify brands cross that threshold within their first two years.

Penalties vary by country. Germany allows fines up to €100,000. Italy can pull a non-compliant service offline. The practical advice is the same as for the ADA: hit WCAG 2.1 AA, document the audit, and publish an accessibility statement on your store.

Testing tools and Shopify apps

Automated tools catch about 30% of WCAG issues. The remaining 70% need manual checks with a keyboard, a screen reader, and a real human. Use both. Start with our free SEO checker for the technical hygiene wins, then run the accessibility audits below.

axe DevTools: free Chrome extension, the most accurate automated scanner.
WAVE: WebAIM browser extension, color-coded overlay of issues.
Lighthouse: built into Chrome, scores accessibility alongside performance.
NVDA or VoiceOver: free screen readers for actual user testing.
Keyboard-only test: unplug your mouse for ten minutes and shop your own store.

Shopify apps that claim “one click WCAG compliance” with an overlay widget do not work and have lost cases in court. Real fixes happen in the theme code, the product data, and the app stack. Treat overlays as a warning sign, not a solution.

If your store uses combined listings or grouped variant pages, accessibility gets trickier because you have more interactive states. The collection page swatches guide on rubikify.com covers how to label swatch buttons so they pass WCAG 4.1.2 (name, role, value).

For variant image filtering on the product page, the variant images FAQ on rubikvariantimages.com answers the alt text and ARIA questions that come up most often.

Quick wins to ship this week

Run axe DevTools on your homepage, a product page, and the cart. Fix every “critical” and “serious” issue.
Add alt text to every product image in the admin, written like a human description not a keyword dump.
Audit your theme palette in our contrast checker and bump any pair under 4.5:1.
Tab through the store with no mouse. Add visible focus styles wherever the focus ring disappears.
Publish a one-page accessibility statement at /pages/accessibility that names your target (WCAG 2.1 AA) and gives a contact email.

None of these take a developer more than half a day. Together they cut your legal exposure and improve real shopping experience for the 15% of users who need assistive tech. Pair them with an image optimization pass and you have made your store faster and more accessible in the same week.

FAQ

Is Shopify itself WCAG compliant?

The Shopify checkout and admin meet WCAG 2.1 AA. Your storefront does not inherit that compliance. Themes, apps, and your product content are all your responsibility.

Do accessibility overlay widgets work?

No. Multiple US court rulings have rejected overlays as a defense, and the overlays themselves often break screen reader behavior. Fix the underlying code instead.

What contrast ratio do I need?

4.5:1 for normal body text, 3:1 for large text and UI components. That is the WCAG 2.1 AA target and the one regulators reference.

Does the EAA apply to my US-based Shopify store?

If you sell to consumers in the EU, yes. The location of your business does not exempt you. Microenterprise exemptions only apply to very small operations.