The European Accessibility Act 2025: The wake-up call you can't ignore

On June 28, 2025, the European Accessibility Act officially kicked in. Spoiler alert: you’re out of excuses.

Published 22 days ago

You built a gorgeous website, scroll-triggered animations, neon gradients, trendy icons… but if your client gets slapped with a €100,000 fine because their site is unusable for someone with low vision, guess who they’re calling first?

As of June 28, 2025, the European Accessibility Act (EAA) is in full force. Sounds like yet another bureaucratic regulation (remember May 25, 2018? Hello, GDPR). But this time, it’s serious: your website, app, e-commerce platform, touchscreen kiosk, and even your e-books now have to meet accessibility standards. And by “have to,” we don’t mean “optional best practices.” We mean fines that can reach up to $1 million for repeat offenders.

Yep. You read that right. One. Million. Dollars. That’s enough to make even the most accessibility-resistant dev rethink their priorities.

96% of websites fail accessibility checks

Most developers and companies keep making the same mistakes. According to WebAIM, 96% of websites have detectable accessibility issues. We’re starting from way behind.

The core issue? We’ve treated accessibility like a nice-to-have feature we’d "get to eventually." The result: millions of disabled users excluded from the web—and the EU has had enough.

Let’s be real. Most sites today:

Use unreadable text/background color combos on mobile
Have <button> that are just styled <span> (spoiler: not keyboard-accessible)
Ignore screen readers completely or misuse ARIA attributes
Hide the focus outline like it’s some ugly CSS wart

But here’s the truth: accessibility ≠ complexity. It just requires a mindset shift (and, yes, reading this article to the end 😉).

Accessibility isn’t just about compliance.
Think this only affects users with disabilities? Wrong. It’s also about smart SEO:

Google crawls your site using similar logic as screen readers
Accessibility best practices overlap with Core Web Vitals (readability, navigation, loading)
Accessible sites rank better, load faster, and convert more

In short: accessibility is SEO, it's business, and it’s your credibility on the line.

So, what exactly is the EAA?

The European Accessibility Act is an EU directive now enforced in member countries. It applies to digital products and services including:

Websites and mobile apps
E-commerce platforms
Messaging and social media apps
Self-service kiosks (ticketing, banking, etc.)
E-books
Banking, telecom, transport portals...

If you work in tech, you’re affected. The grace period is over. Existing websites have until June 28, 2030 to comply. But all new content and features must be accessible immediately. No more “we’ll fix that later.”

The penalties are no joke

Governments have until 2030 to fully enforce the EAA, but new products and services must comply now. Penalties vary by country, but include:

Fines from $1,000 to $1,000,000
Repeat offender penalties
Sales bans for serious violations

So what should you do? Start by fixing the basics

Alt text that actually describes the image

alt attributes aren’t placeholders. They’re essential for users with visual impairments (and for Google).

<!-- ❌ Bad -->
<img src="photo1.jpg" alt="photo1">
<img src="banner.png" alt="image">
<img src="logo.svg" alt="logo">

<!-- ✅ Good -->
<img src="photo1.jpg" alt="Marketing team meeting around a table">
<img src="banner.png" alt="Promo -30% on all tech products">
<img src="logo.svg" alt="Enodo logo - Back to homepage">

Form fields without <label>? Nope.

Placeholders vanish. Labels persist, for both screen readers and human users.

<!-- ❌ Bad -->
<input id="email" type="text" name="email" />

<!-- ✅ Good -->
<label for="email">Email address</label>
<input id="email" type="email" name="email" />

Low color contrast = unreadable text

Your body text should have a contrast ratio of at least 4.5:1.

/* ❌ Bad */
.text-important {
  color: #999;
  background: #fff; /* Contrast: 2.85:1 - FAIL */
}

/* ✅ Good */
.text-important {
  color: #333;
  background: #fff; /* Contrast: 12.6:1 - PASS */
}

Use WebAIM Contrast Checker or Chrome Lighthouse to test.

No keyboard nav = no access

Millions of users don’t use a mouse. If your site doesn’t work with Tab, Enter, or Space, it’s broken.

<!-- ❌ Not keyboard-accessible -->
<div onclick="openMenu()">Menu</div>

<!-- ✅ Keyboard + screen reader-friendly -->
<button onclick="openMenu()" aria-expanded="false">Menu</button>

Don’t remove focus outlines

Without visible focus, keyboard users are flying blind.

/* ❌ Bad */
button:focus {
  outline: none;
}

/* ✅ Good */
button:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Tip: use :focus-visible for a better UX-only shows on keyboard navigation, not mouse clicks.

Want to go further? Use advanced techniques

Use ARIA roles intelligently

Structure your HTML semantically:

<main role="main">
  <section aria-labelledby="products-title">
    <h2 id="products-title">Our Products</h2>
    <!-- Content... -->
  </section>
</main>

<aside role="complementary">
  <!-- Sidebar -->
</aside>

Invisible by default, visible on focus. Loved by screen reader users.

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

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  text-decoration: none;
}
.skip-link:focus {
  left: 6px;
  top: 7px;
}

How to test your site

The 5-second test

Close your eyes. Try to navigate your site with only your keyboard for 5 seconds. If you can’t tell where you are, your site isn’t accessible.

Automated tests

Use axe-core to automate audits:

const axe = require('axe-core');

axe
  .run()
  .then(results => {
    if (results.violations.length) {
      throw new Error('Accessibility issues found');
    }
  })
  .catch(err => {
    console.error('Something bad happened:', err.message);
  });

Browser tools

axe DevTools: gold standard for a11y audits
Wave: visualizes accessibility errors
Lighthouse: Chrome built-in audit tool
Simulate color blindness in Chrome DevTools

Surviving the EAA: The Golden Rules

Test accessibility in your dev workflow
Use semantic HTML, not just endless <div>
Ensure minimum contrast ratio (4.5:1 for body text)
Make all interactive elements keyboard-accessible
Use ARIA where needed, but don’t overdo it
Write meaningful alt text, not just "logo" or "image"

Final thoughts

Web accessibility is like learning to drive: it seems hard at first, but then it becomes second nature, and you wonder how you ever built without it.

The EAA is forcing us to grow up as an industry. And honestly? It’s about time. So don’t wait for your first fine to get serious. Bonus: Google loves accessible sites. You make users happy and win SEO points. It’s the ultimate win-win.

Accessibility isn’t a burden. It’s a chance to code better. And now, it’s the law.