Product Design

Accessibility-first design after the EU Accessibility Act

The EAA became enforceable on 28 June 2025. Here is what changes for product teams shipping to the EU and what accessibility-first design actually means.

May 3, 20267 min read
Accessibility-first design after the EU Accessibility Act

The European Accessibility Act (EAA) is an EU law that requires consumer-facing digital products and services placed on the EU market to meet accessibility requirements aligned with EN 301 549 and WCAG 2.1 Level AA. It became enforceable on 28 June 2025, with limited transitional periods for legacy contracts and self-service terminals.

If you ship a SaaS product, an e-commerce site, a mobile app, an e-reader, a banking service, or a ticketing platform to consumers in the EU, you are in scope. Microenterprises (under 10 employees and under 2 million euros turnover) that provide services are exempt, but microenterprises that manufacture or distribute covered products are not. B2B-only services and internal corporate tools sit outside the scope.

Why this hurts product teams right now

The starting point is brutal. WebAIM's 2025 Million report found that 94.8% of the top one million home pages contain detectable WCAG 2 A/AA failures, with an average of more than 50 errors per page. Six recurring issues, led by low contrast text and missing alt text, account for 96% of all detected errors. The web, in aggregate, has not been designed for accessibility.

Member states set their own penalties under the EAA. Spain and Italy can fine large companies up to 5% of annual turnover for systemic non-compliance. France imposes a fifth-class fine of 7,500 euros per violation for legal entities, with aggregate penalties up to 250,000 euros for systemic issues across a platform, plus a separate 25,000 euros annual penalty for missing an accessibility statement. Ireland is currently the only member state where serious EAA non-compliance can carry criminal penalties. Article 20 of the directive lets authorities remove non-compliant products from the market entirely.

The financial risk is real, but it is not the most expensive item. The most expensive item is the cost of retrofitting a product designed without accessibility in mind. Industry data suggests proactive accessibility costs roughly a third of equivalent retrofit work. Audits (2,500 to 10,000 euros) are cheap. Remediation (5,000 to 20,000 euros and often well beyond) is where the budget evaporates, because the work touches every component, every flow, and every test.

Why the audit-and-retrofit approach falls short

Most teams reach for the same playbook. Book an external accessibility audit. Receive a 200-row spreadsheet of WCAG failures. Hand it to engineering. Hope it fits in the next two sprints. This produces three predictable problems.

First, the audit catches symptoms. The most common failures (low contrast, missing alt, empty links, missing form labels) sit at the component layer. Fixing the symptom in twelve places does not fix the design system that emitted the symptom twelve times. Three months later, new components carry the same defects.

Second, axe-core and similar automated tools detect roughly 30 to 40% of WCAG issues at best. The rest, including focus management, screen reader announcements, semantic structure, and complex interaction patterns, require manual testing with assistive technology. Teams that ship axe-green and treat that as compliance receive their first complaint and learn the hard way.

Third, retrofit ships with regressions. Every contrast fix touches the token layer. Every keyboard-trap fix touches focus management. Every form-label fix touches a shared input primitive. Without governance in place, a retrofit is a freshly broken product.

What accessibility-first actually changes

Accessibility-first does not mean adding accessibility to the backlog. It means moving accessibility constraints into the same place where typography, spacing, and color decisions live. Four shifts matter.

1. Tokens carry accessibility, not just style

A design token system that ships color pairs (foreground plus background) instead of single colors makes contrast a property of the token, not a property of the consumer. The contrast ratio is computed once, in the token layer, and the consumer cannot ship a non-compliant pairing. The same logic applies to focus rings, hit-area minimums (44 by 44 CSS pixels per WCAG 2.5.5, used as a system-level default), and motion preferences.

2. Components are accessible by construction

Every primitive (button, input, dialog, menu, tabs, tooltip) ships with the keyboard model, ARIA pattern, and focus management baked into the component, not into the consumer code. Teams that build their primitives on top of Radix Primitives or React Aria get this almost for free. Teams that build their own pay the engineering cost once and never again, provided governance holds. The wrong move is a third-party component library that does the keyboard model badly: you inherit the bug and cannot patch it. We covered the trade-offs in 10 design system mistakes that wreck consistency at scale.

3. Linting and CI gate accessibility, not just types

The change is operational. axe-core in CI catches the 30 to 40% of issues that automation can detect, before the PR merges. eslint-plugin-jsx-a11y catches markup issues at the IDE. Storybook's a11y addon catches issues per component. None of these replaces human testing, but together they keep the floor from collapsing between audits.

4. Manual testing with real assistive technology, on every release

Pick a small set of flows that account for the bulk of revenue or critical user actions. Test those flows with VoiceOver on macOS and iOS, NVDA on Windows, TalkBack on Android, and keyboard-only navigation. Do this on every release, not once a year. The test plan is a checklist; the value is in catching the issues automation cannot.

What this looks like in practice

A SaaS team we work with publishes a consumer-facing analytics dashboard to EU customers. They started in March 2025 with an external audit that returned 187 distinct issues across 14 components. Instead of fixing the issues in place, the team did three things in parallel: rewrote the four most-reused primitives (button, input, modal, table) on top of accessible foundations; introduced color-pair tokens that made contrast a property of the system; and added axe-core plus jsx-a11y to CI, with the build set to fail on new violations.

By the end of June 2025, the dashboard passed all WCAG 2.1 AA automated checks and three manual passes across VoiceOver, NVDA, and keyboard-only navigation. The total engineering cost was 22 person-days. The legal team published an accessibility statement and registered it. Six months later, the team has not regressed, because the system, not the engineers, enforces the floor.

The lesson is not that 22 person-days is the right number for every product. The lesson is that the work compounds when it lives in the system, and burns out when it lives in tickets.

Where to start if you are behind

Three steps, in order. Run an audit on your top three flows (sign-up, primary task, payment) to understand the shape of the gap. Fix the design system, not the pages, by rebuilding the four to six primitives that account for 80% of the audit findings. Then add the linting and CI gates that prevent regression. Skip these in this order and the work compounds; reverse the order and you ship the same fixes again next year.

Accessibility-first is not a moral position, it is an operational one. Products that treat accessibility as a property of the system serve more users, ship faster after the first investment, and stop carrying compliance risk on every release. The EAA closed the door on the alternative for any team that sells to the EU.

Sources

Photo by Irsyad Rifqi on Unsplash

Frequently asked questions

Does the EAA apply to B2B SaaS products?
Not directly. The EAA scope is products and services placed on the EU market for consumers. Pure B2B services and internal corporate tools are out of scope. The line gets blurry when a B2B product is also offered to individual professionals or consumers via the same purchase flow. If end-users include consumers, the consumer surface is in scope. The B2B-only path stays exempt, but most teams find it cheaper to hold one accessibility floor than to maintain two.
We are a microenterprise. Are we exempt?
Service-providing microenterprises (under 10 employees and under 2 million euros in turnover or balance sheet) are exempt from the service obligations. Microenterprises that manufacture or distribute physical products covered by the EAA, or sell e-readers, ticketing kiosks, or similar covered products, are not exempt for those products. The exemption is narrower than it looks.
Is WCAG 2.1 AA enough, or do we need 2.2?
EN 301 549 v3.2.1, the harmonised European standard referenced by the EAA today, incorporates WCAG 2.1 A and AA. A future revision is expected to align with WCAG 2.2 A and AA. Designing to WCAG 2.2 AA today gives forward compatibility with no real downside, since 2.2 adds nine criteria on top of 2.1 without removing any.
How much does accessibility-first design cost compared to a retrofit?
Industry data points to roughly 30 to 35% of the equivalent retrofit cost when accessibility lives in the design system from day one. The cost gap widens with product scale: small static sites are cheap to retrofit, while consumer SaaS with hundreds of components carry remediation budgets that frequently exceed the cost of the original build. Accessibility-first is the cheaper path on any product expected to live more than 12 months.

Studio

Start a project.

One partner for companies, public sector, startups and SaaS. Faster delivery, modern tech, lower costs. One team, one invoice.