European Accessibility Act Ecommerce Compliance: Complete Guide for Online Retailers

The European Accessibility Act enforcement deadline was June 28, 2025. It passed. Enforcement is live.

If your ecommerce store is non-compliant today, you’re not preparing for a future deadline. You’re operating in violation of EU law right now. National authorities in 27 member states are empowered to investigate, mandate corrections, and fine you for ongoing non-compliance.

This is not a small problem. 101 million EU residents with disabilities cannot complete purchases on most ecommerce platforms. After June 2025, this is both a legal failure and a business failure. Every inaccessible checkout is a lost sale and a potential regulatory action.

This guide covers what European Accessibility Act ecommerce compliance requires in practice, who it applies to, what WCAG 2.1 AA means for your specific pages, what happens if you’re non-compliant, how to audit your store, and which fixes to prioritize. No legal jargon. No vague recommendations. Specific actions.

Who the EAA Applies To

The EAA applies to B2C online retailers operating in the EU. The threshold question: does your business have 10 or more employees OR an annual turnover above €2 million?

If either condition is true, full EAA compliance is required. Both conditions must be false for the micro-enterprise exemption to apply.

The thresholds are:

• 10 or more employees: EAA applies
• Annual turnover above €2 million: EAA applies
• Fewer than 10 employees AND below €2 million turnover: exempt (for now)

The micro-enterprise exemption exists because full compliance is recognized as potentially disproportionate for the smallest businesses. This exemption is not permanent. National laws may restrict it. And even exempt businesses should treat accessibility as a baseline UX requirement, not just a legal one.

For businesses above the thresholds, the law covers your entire consumer-facing digital surface: your website, your mobile app, your checkout flow, your payment processing pages, your customer support systems, your product search, and your order confirmation pages. Every digital touchpoint where a consumer interacts with your service.

EU ecommerce accessibility obligations apply wherever you have customers, not just where your business is incorporated. If you sell in multiple EU countries, compliance obligations exist in each country where you operate. National competent authorities differ by country. Some have broader jurisdiction than others. The legal standard (WCAG 2.1 AA) is the same across the EU.

What WCAG 2.1 AA Actually Means for Ecommerce

WCAG 2.1 AA is the technical standard that the EAA requires you to meet. It’s organized around four principles: Perceivable, Operable, Understandable, Robust. Across these four principles, there are 50 specific success criteria at Level AA that your store must satisfy. Not some of them. All 50. Here’s what each principle means in practice for an ecommerce store.

Perceivable: Your Content Must Work Without Sight

Perceivable means that all information on your site must be available through means other than visual display alone. For ecommerce, the most common failures:

Images without alt text. 94 percent of ecommerce sites have product images with missing or inadequate alt text (WebAIM Million analysis). A screen reader user landing on your product page and hearing “image, image, image” cannot make a purchase decision. Every product image needs descriptive alt text: not “blue-dress-2.jpg” but “Womens midi dress in deep blue linen, front view.” Every decorative image that adds no information should have an empty alt attribute (alt="") so screen readers skip it.

Color contrast failures. 79 percent of ecommerce sites fail color contrast requirements. The WCAG AA standard for normal text is a 4.5:1 contrast ratio. For large text (18px+ or 14px+ bold), the minimum is 3:1. Light grey text on white backgrounds fails. White text on yellow buttons fails. Test every text element on your product pages, navigation, and checkout against this ratio. Use the WebAIM Contrast Checker or the browser DevTools accessibility panel.

Videos without captions. Product videos, brand story videos, and any time-based media need captions. Not auto-generated YouTube captions. Reviewed, corrected, synchronized captions. The WCAG 2.1 AA requirement covers pre-recorded video. Live video has different rules.

Form fields without labels. A form field labeled only with placeholder text fails accessibility. When the user types, the placeholder disappears, and they lose context about what the field is for. Every form field needs a persistent <label> element associated with it via for and id attributes. This applies to every field in your checkout: name, address, email, phone, card number, CVV.

Operable: Your Store Must Work Without a Mouse

Operable means every function can be performed without a mouse. This is the area where ecommerce checkouts fail most dramatically.

Keyboard navigation. Tab order through your site should follow a logical, visible path. Every interactive element (links, buttons, dropdowns, form fields, variant selectors) must be reachable and operable by keyboard alone. Test this: unplug your mouse. Tab through your entire checkout. Can you complete a purchase? Most stores fail this test at the variant selector or the payment step.

Focus indicators. When a user tabs to an element, there must be a visible focus ring around it. Many themes suppress focus rings with outline: none in CSS for visual reasons. This breaks keyboard navigation entirely. Restore focus indicators. Custom-style them if needed. But never remove them.

No keyboard traps. A keyboard trap is when you tab into a component and cannot tab out without using a mouse (modal dialogs, custom dropdown menus, date pickers, and rich text editors are common offenders). If you have any custom UI components built for your theme or added via apps, test them for keyboard traps.

Time limits. If your checkout has a session timeout, users must receive warning before the timeout occurs and be able to extend the session. A user navigating slowly by keyboard or using a screen reader needs more time. Timing out their session mid-checkout violates WCAG 2.1 criterion 2.2.1.

CAPTCHA. If you use CAPTCHA at any point in checkout or account creation, you need an audio alternative. Image-only CAPTCHAs are a compliance failure. If you’re using invisible reCAPTCHA, verify it has proper ARIA labels.

Understandable: Your Forms and Errors Must Be Clear

Understandable means that content and operation must be predictable, and error handling must be helpful.

Error identification. When a form field has an error, the error must identify the field in text, not just with color. “The field highlighted in red has an error” fails. “Email address is required” or “Please enter a valid email address” passes. Every validation error in your checkout must follow this pattern.

Error suggestion. When you know what the correct input should be, you must provide it in the error message. “Phone number must include country code, for example +31 6 12345678” is compliant. “Invalid phone number” is not.

Language declaration. Your page must declare its language via the lang attribute on the HTML element (<html lang="en">). Screen readers use this to select the correct voice and pronunciation engine. Missing language declarations cause screen readers to mispronounce content.

Consistent navigation. Navigation that appears on multiple pages must appear in the same order and location. If your cart icon is top-right on your homepage, it must be top-right on every page. If your primary navigation changes between product pages and checkout, that’s both a UX failure and an accessibility failure.

Input purpose. Form fields that collect personal data must declare their autocomplete attribute. Name fields need autocomplete="name", email fields need autocomplete="email", address fields need specific autocomplete values (autocomplete="street-address", etc.). This enables browser autofill and assistive technology autocomplete, reducing the burden on users with cognitive or motor disabilities.

Robust: Your Code Must Work With Assistive Technologies

Robust means your site must work with current and future assistive technologies.

Valid, semantic HTML. Semantic HTML is the foundation. Use <button> for buttons (not <div> styled to look like buttons). Use <nav> for navigation. Use <main> for main content. Use <h1> through <h6> in logical hierarchy. Screen readers navigate by landmark and heading structure. If your headings are styled paragraphs and your buttons are styled divs, screen reader users cannot navigate your site efficiently.

ARIA usage. ARIA (Accessible Rich Internet Applications) attributes add accessibility information to HTML elements that lack it natively. But ARIA is complex and frequently misused. The rule: no ARIA is better than bad ARIA. If you’re using a custom dropdown, modal, or carousel, it needs correct ARIA roles, states, and properties. If you can use a native HTML element instead, use that.

Dynamic content. When content updates dynamically (filter results updating, autocomplete suggestions appearing, error messages displaying), those updates must be announced to screen readers. This requires ARIA live regions. In ecommerce, the most common failure is a filter updating the product grid without announcing the new result count to screen readers.

App-injected components. Third-party Shopify or WooCommerce apps frequently inject UI components (chat widgets, review widgets, popup modals, cookie banners) that are not accessibility-tested. Each injected component is a potential compliance failure. Audit every third-party component.

What Happens If You’re Non-Compliant

EAA enforcement is now live. The mechanisms differ by country, but the consequences are consistent:

Complaints and investigations. Any person in the EU can file a complaint with the national competent authority about your non-compliant service. Disability advocacy organizations actively test ecommerce sites and file systematic complaints against non-compliant retailers. A single complaint triggers an investigation.

Mandatory corrections with deadlines. Following investigation, authorities issue corrective action notices with specific compliance deadlines. These are not suggestions. Non-compliance with a corrective action notice escalates to penalties.

Financial penalties. Penalty structures vary by member state. The Netherlands, Germany, and France have set substantial fines for persistent non-compliance. Individual violations can be penalized separately. A site with 50 non-compliant product pages could, in theory, face 50 distinct violations.

Market access restrictions. In severe cases, authorities can effectively restrict your ability to operate in their market until compliance is demonstrated. For a business that depends on EU market access, this is an existential risk.

Civil claims. Beyond regulatory enforcement, the EAA enables private parties to bring claims. A disabled person who cannot complete a purchase on your site may have grounds for a civil claim in some member states.

The risk is not theoretical. German and French authorities have been actively enforcing digital accessibility requirements since 2020. The EAA creates a harmonized framework that extends this enforcement to all 27 member states with a common standard.

How to Audit Your Store for EAA Compliance

Compliance requires both automated testing and manual testing with actual assistive technologies. Automated tools find 30 to 40 percent of accessibility issues. The rest require human testing.

Step 1: Automated Scan

Run your product page, category page, cart, and checkout through an automated WCAG scanner. Free options:

• WAVE (wave.webaim.org): paste your URL and get a visual overlay of errors, warnings, and structural issues. Excellent for beginners. Shows errors in context.
• axe DevTools (browser extension, free tier): runs in browser dev tools, categorizes issues by WCAG criterion, shows HTML context for each issue.
• Google Lighthouse: built into Chrome DevTools (F12 > Lighthouse > Accessibility). Scores 0 to 100, categorizes issues, links to WCAG criteria.

Run all three on your top product page URL and your checkout URL. Document every error. This is your baseline.

Typical errors you’ll find on an average ecommerce store:

• Images without alt text (product images, banner images, icon images)
• Form fields without associated labels (checkout fields, newsletter signup)
• Insufficient color contrast (promo banners, secondary text, placeholder text)
• Missing page language declaration
• Links without descriptive text (“click here,” “read more,” “learn more”)
• Empty buttons (icon buttons without aria-labels)

Step 2: Keyboard Navigation Test

Unplug your mouse or disable your trackpad. Navigate your entire checkout flow using only the keyboard:

• Tab to move forward through interactive elements
• Shift+Tab to move backward
• Enter or Space to activate buttons and links
• Arrow keys to navigate within dropdowns and radio buttons

Test this path: homepage search, find a product, reach the product page, select a variant, add to cart, proceed to checkout, fill in personal details, select shipping, enter payment details, complete purchase.

Document every step where you either can’t navigate, lose visual context of where you are (no focus indicator), or get trapped.

Step 3: Screen Reader Test

Test your store with a screen reader. Free options:

• NVDA + Firefox on Windows (most common combination for testing)
• VoiceOver + Safari on Mac (Command+F5 to enable)
• TalkBack on Android (most common for mobile screen reader testing)

Navigate your product page using screen reader shortcuts: headings (H key in NVDA), links (K key), form fields (F key), landmarks (D key). Ask: does the page structure make sense? Can you identify products without seeing them? Can you select variants and add to cart?

Navigate your checkout. Can you identify each form field? Are error messages read when you submit incomplete fields? Is the order summary readable?

Screen reader testing is uncomfortable if you’ve never done it. Do it anyway. Fifteen minutes of screen reader navigation shows you more about your store’s accessibility than any automated report.

Step 4: Color Contrast Check

Open your site in Chrome. Install the axe browser extension. Click the axe icon and run the full accessibility check. All contrast failures are listed with the specific elements and their actual versus required contrast ratios.

Alternatively: use Chrome DevTools. Open DevTools, go to the Elements panel, click on any text element, and look for the “Contrast ratio” field in the Styles panel. Chrome shows whether the element passes or fails AA and AAA.

Check specifically: body text, headings, button text, link text in body copy, placeholder text (note: placeholder text fails on most sites and is also a separate UX problem), price text, sale price text, review text, footer text.

Step 5: Document and Prioritize

After automated scan, keyboard test, screen reader test, and contrast check, you have a list of issues. Prioritize by impact:

Critical (fix immediately): Issues that prevent a disabled user from completing a purchase. Broken keyboard navigation in checkout. No alt text on primary product images. Form fields without labels in the checkout flow. These are the issues that trigger regulatory complaints and prevent revenue.

High (fix within 30 days): Issues that significantly impair the experience. Missing focus indicators throughout the site. Color contrast failures on primary CTAs. Incorrect or missing error messages in forms. Dynamic content not announced to screen readers.

Medium (fix within 90 days): Issues that reduce quality but don’t block completion. Some images without alt text (non-product images, icons). Missing or incorrect ARIA attributes on complex components. Missing autocomplete attributes on form fields.

Low (address in next development cycle): Issues with minimal practical impact or affecting edge cases. Complex WCAG criteria that require significant architectural changes.

Priority Fixes: Where to Start

Based on the audit categories above, here’s the specific implementation order for an ecommerce store:

Fix 1: Checkout Form Labels (1 day)

Every form field in your checkout needs a proper <label> element. In Shopify, this requires editing the checkout template (or using Checkout Extensibility on Plus). In WooCommerce, edit the checkout template or use a plugin.

The pattern:

<label for="checkout_email">Email address</label>
<input type="email" id="checkout_email" name="email" autocomplete="email">

This single fix addresses one of the most common causes of checkout failure for screen reader users. Get a developer to audit every field in your checkout template and add missing labels. Estimate: 4 to 8 hours developer time.

Fix 2: Product Image Alt Text (2 to 5 days)

Audit your product catalog for missing alt text. In Shopify, alt text is set per image in the product editor. Bulk alt text editing is available via the Shopify admin or bulk editing apps.

For product images, write descriptive alt text: product name, color, key feature visible in the image, context if relevant. For images where the product name is sufficient (clear product-only photos), the product name and variant is enough. Avoid “image of” as a prefix. Just describe what’s shown.

For icons and decorative images: set an empty alt attribute (alt=""). This tells screen readers to skip the image.

Estimate: 2 to 5 days depending on catalog size. Can be partially delegated to content team members with clear guidelines.

Fix 3: Color Contrast on CTAs and Key Text (1 to 2 days)

Fix contrast failures on your primary CTA buttons first. An inaccessible “Add to Cart” button is a direct compliance and conversion failure. Then fix navigation text, product title contrast, price text, and promo banner text.

In Shopify: theme colors are set in theme settings. Most themes expose primary button colors, text colors, and background colors as configurable settings. You don’t need to edit code. Adjust until every key element passes 4.5:1 for normal text, 3:1 for large text.

Use the WebAIM contrast checker to find passing color values before changing your theme.

Estimate: 4 hours for theme color adjustments plus testing.

Fix 4: Focus Indicators (1 day)

Add this CSS to your theme stylesheet and remove any outline: none declarations on interactive elements:

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Choose a focus color that contrasts with your background at 3:1 ratio. Blue (#005fcc) on white is a standard choice. Adjust the color to match your brand while maintaining the contrast requirement.

Search your theme CSS for outline: none and outline: 0. Every instance on interactive elements should be removed or replaced with a visible focus style.

Estimate: 2 to 4 hours.

Fix 5: Skip Navigation Link (2 hours)

Add a “Skip to main content” link as the first element in your page <body>. This allows keyboard users to bypass navigation and jump directly to the page’s main content. Most screen reader users and keyboard users rely on this.

<a href="#main-content" class="skip-link">Skip to main content</a>

Style it to be visually hidden by default and visible when focused:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #005fcc;
  color: white;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

Estimate: 1 to 2 hours including testing.

Fix 6: Error Message Improvement (1 to 2 days)

Audit every form validation error message in your checkout and account creation flows. Each error message must:

• Identify the specific field with the error (in text, not just by color)
• Explain what’s wrong
• Tell the user how to fix it

“This field is required” → “Email address is required” “Invalid input” → “Please enter a valid email address (example: name@company.com)” “Error” → “Your card number appears to be incomplete. Please check and try again.”

In Shopify, error messages are partially controlled by the checkout template and partially by Shopify’s validation logic. Checkout Extensibility (Plus) gives full control. For Shopify Basic/Grow, you can improve some error messaging via checkout customization apps.

Estimate: 4 to 8 hours developer time.

Fix 7: Language Declaration (30 minutes)

Check your <html> element’s lang attribute. In Shopify, go to Online Store > Themes > Edit code > Layout > theme.liquid. Find the <html opening tag. Verify it includes lang="{{ request.locale.iso_code }}". This dynamically sets the language based on the store’s active locale. If it’s hardcoded to one language or missing entirely, add it.

For WooCommerce, this is typically handled by your theme or by WordPress’s multilingual plugin (WPML, Polylang).

Estimate: 30 minutes.

Your Accessibility Statement

Every EAA-covered business must publish an accessibility statement. This is a legal requirement, not optional.

Your accessibility statement must include:

• A commitment to accessibility and the standard you’re working toward (WCAG 2.1 AA)
• Which parts of your site or app you know are not yet accessible
• How users can contact you to report accessibility problems or request assistance
• How and where to escalate if your response is unsatisfactory (link to the national enforcement body in your primary market)
• Date the statement was last reviewed

Some EU member states also recognize third-party accessibility certifications (audits conducted by accredited bodies). While EAA certification from a recognized auditor is not a legal requirement, it provides documented evidence of a good-faith compliance effort. For stores operating across multiple EU markets, a formal audit report strengthens your position if a complaint is filed.

Publish it as a page on your site linked from your footer. Update it when your compliance status changes or when you add new features.

A non-exhaustive example structure:

“[Store name] is committed to ensuring our ecommerce service is accessible to people with disabilities. We aim to meet WCAG 2.1 Level AA. We are currently working to address the following known gaps: [list specific issues]. If you experience accessibility barriers on our site, contact us at [email] or [phone]. We aim to respond within 2 business days. If you are unsatisfied with our response, you can contact [relevant national authority].”

Post your statement now. An honest statement that acknowledges known gaps is better than no statement. An honest statement that acknowledges you’re working on issues is not an admission of liability. It’s a legal requirement.

EAA Compliance Is Also Conversion Optimization

Accessibility and conversion optimization solve the same problems. Unclear error messages frustrate disabled users and non-disabled users equally. Missing form labels confuse screen reader users and users filling in forms under poor lighting on mobile. Poor color contrast makes text hard to read for visually impaired users and for anyone reading outdoors.

The 40 percent of ecommerce sites that improve checkout form accessibility consistently see improved completion rates across their entire user base. The 30 percent that improve color contrast see engagement improvements on the affected elements.

Accessibility compliance is not a cost center. Properly implemented, it reduces abandonment, reduces support queries about how to complete purchases, reduces returns from incorrect orders placed because product information was unclear, and reduces legal risk.

101 million EU residents with disabilities represent purchasing power that most ecommerce stores currently lock out completely. Compliance opens that market.

The stores that started their EAA compliance work before the June 2025 deadline are now operating with a competitive advantage over stores still scrambling. Enforcement creates an environment where accessibility compliance is a market differentiator.

Start with the seven priority fixes above. Run the audit in Step 1 through 5 today. Publish your accessibility statement this week.

Enforcement is live. The question is not whether you’ll need to comply. The question is whether you’ll comply on your own terms or under regulatory pressure.

---

What to Read Next

• Product Page Anatomy - the structural elements of a product page that need to meet accessibility standards
• Checkout Optimization Tips - checkout accessibility as both a compliance and conversion issue
• The €50,000 Ecommerce Mistakes - the UX failures (including accessibility gaps) that cost ecommerce stores serious revenue
• UX Research Guide - how to test your store with real users, including users with disabilities

Implementing accessibility? The design subscription covers ecommerce UX including accessibility work. Book a UX QuickScan for a store-specific accessibility audit.