EAA and WCAG 2.2 Compliance for Shopify Stores: A Practical Guide

Accessibility used to be treated as a nice-to-have. That changed in 2025. The European Accessibility Act (EAA) is now enforced across all 27 EU member states, and it names a specific technical bar for ecommerce: WCAG 2.1 Level AA. If your store falls under the law and does not meet that bar, you are non-compliant right now, not preparing for a deadline.

This guide is written for Shopify merchants. It explains who the law applies to, what the standard actually requires page by page, and which fixes to make first. For a broader primer on why accessibility matters to UX and sales, start with our guide on accessibility in Shopify design, then use this piece to get compliant.

Who the EAA applies to

The EAA covers B2C online retailers operating in the EU. The threshold test is simple:

• 10 or more employees: the EAA applies.
• Annual turnover above 2 million euros: the EAA applies.
• Fewer than 10 employees and under 2 million euros: currently exempt.

If either of the first two is true, the whole of your customer-facing store is in scope: storefront, product pages, cart, checkout, account pages, order confirmation, and any customer support surface. Obligations exist wherever you have EU customers, not only where your company is registered, so selling into several EU countries means you are accountable in each of them. The legal standard, WCAG 2.1 AA, is the same everywhere.

Even if you are exempt today, treat accessibility as a baseline. The exemption is not guaranteed to last, and roughly 101 million EU residents live with a disability. An inaccessible checkout locks out real buyers.

What WCAG 2.1 AA means for a Shopify store

WCAG is organized around four principles: perceivable, operable, understandable, and robust. There are 50 Level AA success criteria. You need all of them, but in practice a handful account for most ecommerce failures. Here is what they mean on a real store.

Perceivable: your content works without sight

• Alt text on every product image. Describe the product, not the file. "Women's midi dress in deep blue linen, front view" beats "blue-dress-2." Set an empty alt attribute on purely decorative images so screen readers skip them.
• Color contrast. Body text needs a 4.5:1 ratio against its background, large text 3:1. Light gray on white and white on a pale accent button are the usual Shopify theme offenders. Check with the WebAIM Contrast Checker.
• Labels, not placeholders. Every checkout and form field needs a persistent label tied to it. Placeholder-only fields lose their context the moment a shopper starts typing.

Operable: your store works without a mouse

• Keyboard navigation. Every link, button, dropdown, variant selector, and checkout field must be reachable and usable with the keyboard alone. The honest test: unplug your mouse and try to complete a purchase. Most stores fail at the variant selector or the payment step.
• Visible focus. When a shopper tabs to an element, a clear focus ring must show where they are. See the focus-indicator fix below, because this is the single most common regression in Shopify themes.
• No keyboard traps and no surprise timeouts. Custom modals, drawers, and date pickers should be exitable by keyboard, and any checkout session timeout must warn the user and let them extend it.

Understandable: forms and errors are clear

• Errors identify the field in text, not just with a red border. "Please enter a valid email address" passes. "The highlighted field has an error" does not.
• Error messages suggest a fix when you know the correct format.
• Declare the page language with the lang attribute, and use autocomplete attributes on personal-data fields so browser autofill and assistive tech can help.
• Keep navigation consistent across pages.

Robust: your code works with assistive technology

Use semantic HTML: real buttons, real headings in order, landmarks like nav and main. Use ARIA only where native elements cannot do the job, because bad ARIA is worse than none. Announce dynamic changes, for example a filtered product grid updating its result count, through ARIA live regions. And audit third-party apps: injected chat widgets, review apps, and cookie banners are frequent, unowned compliance failures.

The five WCAG 2.2 criteria that matter most for ecommerce

WCAG 2.2, published in October 2023, adds nine criteria. It is not yet legally mandated (the EAA still references 2.1), but EN 301 549 tracks the current W3C standard, so alignment is a matter of time. More importantly, five of the new criteria were written to address failures that are endemic to ecommerce, and the fixes are cheap. Build to them now and you avoid a second compliance cycle later.

• 2.5.8 Target Size (AA): interactive elements must be at least 24 by 24 CSS pixels, or spaced 24px apart. Size and color swatches, filter chips, quantity steppers, and quick-add icons routinely ship at 16px. Set a minimum size in your base CSS. For mobile you should be at 44px or above for conversion reasons anyway, which clears this automatically.
• 3.3.7 Redundant Entry (A): do not force shoppers to re-enter data they already gave you. The classic failure is a billing address form that does not offer, or does not remember, "same as shipping." Shopify's native checkout handles this well; the risk lives in custom or headless builds and checkout apps.
• 3.3.8 Accessible Authentication (AA): login, account creation, and checkout must not depend on a cognitive puzzle like an image CAPTCHA with no alternative. Move to invisible, score-based reCAPTCHA v3, or ensure a working audio alternative exists.
• 2.5.7 Dragging Movements (AA): anything driven by dragging needs a non-drag alternative. Price range sliders are the usual culprit. Add number inputs for minimum and maximum price wired to the slider, and make sure carousels have real arrow buttons, not swipe-only.
• 2.4.11 Focus Appearance (AA): the focus indicator must be visible and meet a size and contrast minimum. This is where most themes fall down.

The focus fix deserves its own note, because it is the highest-value line of CSS you can write. Many themes globally suppress the focus ring for "design consistency":

/* Delete this. It breaks keyboard navigation site-wide. */
* { outline: none; }

/* Replace with a visible, high-contrast focus style. */
:focus-visible {
  outline: 2px solid #005fcc; /* meets 3:1 on white */
  outline-offset: 2px;
}

Using :focus-visible rather than :focus keeps the ring for keyboard users without showing it on mouse clicks, so your visual design is untouched.

How to audit your Shopify store

Automated tools catch roughly 30 to 40 percent of issues. The rest need manual testing. Run all of the following on your homepage, a collection page, a product page, and your full checkout.

1. Automated scan. Use WAVE, axe DevTools, or Chrome Lighthouse to baseline contrast, missing alt text, unlabeled fields, and empty buttons.
2. Keyboard pass. Unplug the mouse. Tab from search to product to variant to cart to checkout to payment. Note every place you get stuck or lose the focus ring.
3. Screen reader pass. Fifteen minutes with VoiceOver (Mac) or NVDA (Windows) tells you more than any report. Can you identify each product, select a variant, and hear validation errors read aloud?
4. Contrast check. Verify body text, buttons, prices, sale prices, and placeholder text against 4.5:1 (3:1 for large text).
5. Target-size sweep. Inspect variant selectors, filter chips, and icon buttons in DevTools and flag anything under 24px.

Priority fixes, in order

Most of the highest-impact fixes are hours of work, not months:

1. Add labels to every checkout field. On Shopify Plus, use Checkout Extensibility; otherwise audit your form templates.
2. Fix contrast on primary CTAs first, then navigation, prices, and promo banners. Most themes expose these as color settings, so no code needed.
3. Restore focus indicators with the :focus-visible rule above and remove any global outline: none.
4. Set a 24px minimum tap target on swatches, chips, and steppers.
5. Add a "skip to main content" link as the first element in the body.
6. Rewrite validation errors to name the field and suggest the fix.
7. Confirm the lang attribute is set in theme.liquid (Shopify sets lang="{{ request.locale.iso_code }}" when configured correctly).

Skip accessibility overlay apps. They patch at runtime, often break working behavior, and do not reliably protect you. Fix the theme.

Publish an accessibility statement

Every EAA-covered business must publish one. It should state the standard you are working toward (WCAG 2.1 AA), list the gaps you know about, give a contact route for reporting problems, point to the relevant national enforcement body, and carry a review date. An honest statement that acknowledges known gaps is not an admission of liability, it is a legal requirement, so publish it now and update it as you fix things.

Accessibility is conversion optimization

Here is the part that makes this easy to justify. Every fix above helps everyone. Unlabeled fields confuse screen reader users and thumb-typing mobile shoppers alike. Tiny variant selectors fail motor-impaired users and anyone on a phone. Poor contrast hurts low-vision users and anyone shopping outdoors. Baymard's checkout research ties forced re-entry and unclear errors directly to abandonment. In other words, the accessibility backlog and the conversion backlog are largely the same list. For a deeper look at the checkout side of this, see how to reduce Shopify checkout friction.

If you would rather not run the audit yourself, a focused UX audit will flag the accessibility failures that are also costing you conversions, and a full UX audit covers your key templates end to end with prioritized, design-level fixes. Larger remediation, for example rebuilding an inaccessible custom checkout, is custom development work.

Enforcement is live. The only real choice left is whether you fix these issues on your own terms or under a complaint. Start with the seven priority fixes and the five-step audit above.