Online Store Accessibility: A WCAG 2.2 Checklist and What the European Accessibility Act Means for You

Online store accessibility used to be a "nice to have" for many merchants. That changed on June 28, 2025, when the European Accessibility Act (EAA) started applying to many ecommerce businesses that sell to consumers in the EU. Whether or not the law covers you, the same work makes your store usable for shoppers who navigate by keyboard, use screen readers, or zoom their screens. This post explains the EAA in plain terms and gives you a practical WCAG 2.2 checklist.

A quick note: we build and redesign stores, we are not lawyers. The legal section is general orientation, not advice for your business. If you sell into the EU at meaningful volume, a short consultation with a lawyer who knows the EAA is money well spent.

What the European Accessibility Act Means for Online Stores

The EAA is an EU directive setting accessibility requirements for certain products and services, and ecommerce services sold to consumers are on the list. Each member state wrote it into national law, so enforcement bodies, penalties, and procedures differ by country.

Who is likely covered

The rules can apply to businesses selling online to consumers in the EU, including businesses based outside it. If you ship to Germany or France from the US or UK, do not assume you are out of scope because your company is registered elsewhere.

The micro-enterprise exemption

Micro-enterprises providing services, generally businesses with fewer than 10 employees and annual turnover or balance sheet total of no more than EUR 2 million, are exempt from the service requirements. Many small Shopify merchants fall into this group, but details like group companies and product obligations matter, so confirm your position.

What "compliance" looks like in practice

The EAA does not itself say "meet WCAG 2.2." The harmonized European standard used to show conformity, EN 301 549, is built on the Web Content Accessibility Guidelines (WCAG) at level AA. At the time of writing it maps to WCAG 2.1 AA, with an update toward 2.2 in progress, so check the current version. Targeting WCAG 2.2 AA is the sensible choice: it includes all of 2.1 AA plus criteria that matter in checkout flows. Covered businesses must also explain how their service meets the requirements, which for most stores means an accessibility statement.

Outside the EU, the benchmark is similar. US businesses have faced ADA-related website lawsuits for years, and WCAG is commonly the reference point there too.

The WCAG 2.2 Checklist for Online Store Accessibility

Here is the checklist we use when auditing a store. Each item includes what to check and how to fix the common failures we see.

1. Color contrast

WCAG requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text (roughly 24px regular or 19px bold and up). Buttons, form field borders, and icons that convey meaning need at least 3:1 against their background.

Stores fail most often with light gray prices and descriptions on white, white text on pastel brand buttons, and sale badges over busy photos. How to fix it: run your brand palette through a contrast checker once and define approved text and button color pairs in your theme settings, rather than patching pages one by one.

2. Keyboard access

Unplug your mouse and try to buy something. You should be able to reach every link, button, menu item, filter, variant selector, and form field with Tab and Shift+Tab, operate them with Enter or Space, and close any popup with Escape.

Common failures in stores:

• Mega menus that only open on mouse hover
• Custom variant swatches built from plain div elements instead of buttons or radio inputs
• Cart drawers and quick-view modals that trap focus, or that let focus wander behind them into the page
• Newsletter popups with no keyboard-reachable close button

3. Visible focus

When someone tabs through your store, they need to see where they are. Many themes remove the browser's default focus outline because a designer found it ugly, which leaves keyboard users guessing.

WCAG 2.2 added a related criterion, Focus Not Obscured (Minimum). A focused element must not be completely hidden behind sticky headers, cookie banners, chat widgets, or "add to cart" bars. Sticky elements are everywhere in ecommerce, so test this carefully on product and collection pages.

How to fix it: design a clear, on-brand focus style (a 2 to 3px outline with good contrast works well) and apply it globally. Add scroll padding so focused elements do not end up underneath sticky headers.

4. Alt text for images

Every meaningful image needs a text alternative that describes what matters to a shopper. Decorative images should have empty alt text so screen readers skip them.

Practical guidance for product imagery:

• Describe what differs between images: "Linen shirt in olive, back view" rather than repeating the product name six times
• Do not stuff keywords into alt text
• Banners with "30% OFF" baked into the image need that text in the alt attribute, or better, as real HTML text
• Icon-only buttons (search, cart, account) need an accessible name such as "Open cart, 2 items"

5. Forms and error messages

Forms are where accessibility and revenue meet most directly: sign-up, account creation, contact, and checkout.

Check that:

• Every field has a visible, programmatically connected label (not just placeholder text)
• Required fields are marked in text, not only with color or an asterisk that is never explained
• Errors are described in words ("Enter a postal code with 5 digits") and placed next to the field, and screen readers are told an error occurred
• Input purpose is identified (autocomplete attributes for name, email, address, phone) so browsers and assistive tools can fill them in

WCAG 2.2 added two criteria that matter here. Redundant Entry means you should not make people type the same information twice in one process, such as re-entering a shipping address as a billing address without a "same as shipping" option. Accessible Authentication (Minimum) means login should not depend on a cognitive test like solving a puzzle or transcribing distorted characters unless there is an alternative. Allowing password managers and paste into password and code fields goes a long way.

6. Target size

WCAG 2.2 introduced Target Size (Minimum): interactive targets should be at least 24 by 24 CSS pixels, or have enough spacing around them that a 24px circle centered on each does not overlap its neighbors. There are exceptions (for example, links inside a sentence), but ecommerce layouts are full of tiny targets.

Watch for:

• Quantity plus and minus buttons in the cart
• Color swatches on collection grids
• Small "remove" links in cart drawers
• Pagination numbers and filter checkboxes on mobile

A related 2.2 criterion, Dragging Movements, says anything done by dragging (price range sliders, before/after comparisons, drag-to-reorder) must also work with a simple click or tap. A price slider should come with min and max input fields, for example.

7. Carousels, video, and motion

Auto-rotating hero sliders and autoplaying videos cause several problems at once. Anything that moves automatically for more than five seconds needs a way to pause, stop, or hide it. Carousel controls must be keyboard accessible and labeled. Content should not flash more than three times per second.

We usually recommend avoiding auto-rotation. If you keep a carousel, add a visible pause button and respect the operating system's "reduce motion" setting. Product videos with meaningful speech need captions.

8. Checkout

A single blocker in checkout means a lost order. On Shopify, the core checkout is maintained by Shopify, so the risk shifts to what you add: checkout extensions, upsell blocks, third-party delivery date widgets, and custom cart pages. Test the full path with a keyboard and a screen reader, paying attention to:

• Discount code fields and their success or error messages
• Shipping method and delivery date pickers
• Timeouts that end a session without warning
• Consistent Help (another WCAG 2.2 criterion): if you offer help such as a chat link or contact details, keep it in the same relative place across pages

9. Your accessibility statement

Publish a footer-linked page stating the standard you aim for (WCAG 2.2 AA), what you tested and when, known issues with a fix plan, and how shoppers can reach you if they hit a barrier. Be honest: a false claim of full compliance is worse than a list of known gaps and a timeline. If the EAA covers you, check the information requirements in each country's national law.

How to Test: Automated Tools Plus Manual Checks

Automated scanners such as axe, WAVE, and Lighthouse are useful first passes. They catch missing alt attributes, many contrast failures, empty buttons, and missing form labels quickly. The limitation is well known in the accessibility community: automated tools can only detect a portion of WCAG issues. They cannot tell whether alt text is accurate, whether focus order makes sense, or whether a screen reader user can actually finish checkout.

A realistic testing routine looks like this:

1. Run an automated scan on your key templates: home, collection, product, cart, account, and a content page
2. Do a keyboard-only pass through the full purchase flow
3. Test with a screen reader: VoiceOver on Mac and iPhone and NVDA on Windows are both free
4. Check zoom and reflow at 200% and 400%
5. Retest every time you install a new app or change your theme, since apps inject code that can break things you already fixed

For most stores built on a well-maintained theme, a first audit takes a few days, and remediation typically runs from one to four weeks depending on how much custom code and how many third-party apps are involved. Older, heavily customized themes can take longer, and sometimes the practical answer is a rebuild on an accessible foundation. That is often the point where a Shopify redesign makes more sense than patching dozens of legacy components.

Why Accessibility Overlay Widgets Are Not a Fix

Apps that promise "instant compliance" with one line of script and a floating accessibility icon are tempting, but overlays do not repair the underlying code. A button built from an unlabeled div is still an unlabeled div after the overlay loads.

Many disabled users and accessibility practitioners have spoken out against overlays because they can interfere with the assistive technology people already use, and stores using them have still been named in US accessibility complaints. If a vendor says their widget makes you legally compliant, treat that as a red flag. The durable approach is fixing the theme, components, and content.

Building Accessibility Into Your Store Going Forward

The cheapest time to handle accessibility is during design. When contrast, focus styles, target sizes, and form patterns live in your design system, every new page inherits them. That is central to how we approach UI/UX design for ecommerce: accessible components defined once and reused, so the store does not drift. Beyond that, train whoever uploads products to write useful alt text, ask app vendors about accessibility before installing, and re-audit yearly and after major theme updates.

FAQ

Does the European Accessibility Act apply to my store if I am based outside the EU?

It can. The EAA focuses on services offered to consumers in the EU, not only on where the business is registered. If you actively sell to EU shoppers and are not a micro-enterprise, assume it may apply and get legal advice for the countries you sell into.

Is WCAG 2.1 enough, or do I need WCAG 2.2?

The European standard used for EAA conformance currently references WCAG 2.1 AA, with an update toward 2.2 in progress. Since WCAG 2.2 AA includes all of 2.1 AA plus a few extra criteria, aiming for 2.2 covers you either way and future-proofs the work.

Can I make my Shopify store accessible without rebuilding it?

Usually yes. Most stores on a modern theme can reach WCAG 2.2 AA through targeted fixes to colors, focus styles, components, and apps. A rebuild tends to make sense only when the theme is old, heavily customized, or relies on many inaccessible third-party scripts.

Will an accessibility overlay protect me from complaints?

No overlay can guarantee compliance, because it does not fix the source code shoppers and assistive technologies interact with. Invest that budget in an audit and real remediation instead.

If you want a second pair of eyes on your store's accessibility, you can book a free 1-hour strategy call with us through our contact page.