European Accessibility Act 2025 : Le réveil brutal de l'accessibilité web

Le 28 juin 2025, l'European Accessibility Act est entré en scène. Spoiler alert : tu n'as plus d'excuse.

Publié il y a 22 jours

Tu développes un site super stylé, animations au scroll, couleurs flashy, icônes tendance… mais si ton client reçoit une amende de 100 000 € parce que son site est inutilisable pour une personne malvoyante, devine qui il va appeler en premier ?

Depuis le 28 juin 2025, l'European Accessibility Act (EAA) est entré en application. Oui, ça sonne comme un règlement un peu chiant (tu te rappelles du 25 mai 2018 ? Coucou le RGPD). Concrètement ? Ton site, ton app, ta boutique e‑commerce, ta borne tactile, et même les livres numériques doivent maintenant respecter les standards d'accessibilité. Et quand je dis "doivent", je ne parle pas d'une recommandation bien intentionnée qu'on peut ignorer en se disant "on verra plus tard". Non, là on parle d'amendes qui peuvent monter jusqu'à 1 million de dollars pour les récidivistes.

Oui, tu as bien lu. Un million. De quoi faire réfléchir même les plus réfractaires à l'accessibilité.

96% des sites web ne sont pas accessibles

Malheureusement, la plupart des développeurs et des entreprises font les mêmes erreurs depuis des années. Selon WebAIM, environ 96% des sites web présentent des problèmes d'accessibilité détectables automatiquement. Autant dire qu'on part de loin.

Le problème ? On a traité l'accessibilité comme une option, un nice-to-have qu'on ajouterait quand on aurait le temps. Résultat : des millions d'utilisateurs handicapés se retrouvent exclus du web, et maintenant l'Europe dit stop.

Soyons honnêtes. La plupart des sites :

affichent des contrastes texte/fond illisibles sur mobile,
ont des <button> qui ne sont en fait que des <span> stylisées (spoiler : ça ne marche pas au clavier),
oublient totalement les lecteurs d'écran ou n'ont jamais entendu parler d'attributs ARIA
planquent le focus comme si c'était une vieille verrue CSS.

Et pourtant, accessibilité ≠ complexité. Il faut juste changer de mindset (et lire cet article jusqu'au bout 😉).

Mais attention, l'EAA ce n'est pas juste une question de conformité légale.
Tu crois que c'est "juste" pour les personnes handicapées ? Perdu. C'est aussi une question de SEO intelligent :

Google utilise les mêmes principes que les lecteurs d'écran pour crawler ton site
Les critères d'accessibilité recoupent les Core Web Vitals (lisibilité, navigation, chargement…)
Un site accessible se référence mieux, se charge plus vite, et convertit plus largement

En clair : l'accessibilité, c'est du SEO, c'est du business, c'est ta crédibilité.

L'EAA, c'est quoi ?

L'European Accessibility Act, c'est la transposition de la directive européenne dans chaque pays membre. Elle s'applique aux produits et services numériques :

Sites web, apps mobiles, ...
E-commerce
Applications de messageries / réseaux sociaux
Bornes automatiques (billetterie, banques, etc.)
Livres numériques
Plateformes bancaires, télécoms, transport...

Bref, si tu bosses dans le numérique, tu es concerné. Et le délai de grâce est fini. Les sites existants ont jusqu'au 28 juin 2030 pour être conformes. Mais tous les nouveaux contenus (et nouvelles fonctionnalités) doivent l'être immédiatement. Tu ne peux plus dire "on verra plus tard".

Les sanctions qui font mal

Les États membres ont jusqu'en 2030 pour appliquer pleinement ces mesures, mais les nouveaux produits et services doivent être conformes dès maintenant. Et les sanctions ? Elles varient selon les pays, mais on parle de :

1 000 à 1 000 000 de dollars d'amendes
Sanctions multiples pour les récidivistes
Interdiction de commercialisation dans les cas graves

Ok, mais je fais quoi concrètement ?

Voici les erreurs les plus fréquentes (et comment les corriger). Prépare-toi à faire le ménage dans ton HTML.

Les textes alternatifs bâclés

L'attribut alt des images sert à décrire ce qu'il y a sur l'image. Elle permet aux utilisateurs mal voyants (et à Google) de comprendre ce qu'il y a sur l'image.

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

<!-- ✅ Bon -->
<img src="photo1.jpg" alt="Équipe marketing en réunion autour d'une table">
<img src="banner.png" alt="Promotion -30% sur tous les produits tech">
<img src="logo.svg" alt="Retour à l'accueil - Enodo">

Les champs de formulaire mal intégrés

Utiliser un <label> et pas juste un placeholder pour décrire vos champs. Sinon, les lecteurs d'écran ne peuvent pas dire à l'utilisateur ce qu'il doit saisir. Résultat : l'utilisateur malvoyant se retrouve face à un "champ de saisie" mystère, sans savoir s'il doit taper son email, son mot de passe ou son nom.

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

<!-- ✅ Bon -->
<label for="email">Adresse email</label>
<input id="email" type="email" name="email" />

Les contrastes de couleur insuffisants

Le texte doit avoir un rapport de contraste d'au moins 4.5:1 (ou 3:1 pour les gros titres).

/* ❌ Mauvais */
.texte-important {
  color: #999999; /* Gris clair */
  background: #ffffff; /* Blanc */
  /* Ratio de contraste : 2.85:1 - ÉCHEC */
}

/* ✅ Bon */
.texte-important {
  color: #333333; /* Gris foncé */
  background: #ffffff; /* Blanc */
  /* Ratio de contraste : 12.6:1 - SUCCÈS */
}

Tu peux tester tes contrastes avec WebAIM Contrast Checker ou Lighthouse.

Si tu as l'habitude d'utiliser la souris, il y a des millions d'utilisateurs qui s'en passent. Si ton site n'est pas navigable au clavier (Tab, Entrée, Espace, …), ces utilisateurs sont tout simplement bloqués.

<!-- ❌ Mauvais : Pas d'utilisation du clavier -->
<div onclick="ouvrirMenu()">Menu</div>

<!-- ✅ Bon : Utilisable au clavier ET par les lecteurs d'écran -->
<button onclick="ouvrirMenu()" aria-expanded="false">Menu</button>

Le focus supprimé

Si on supprime l'effet visuel du :focus, les utilisateurs naviguant au clavier perdent totalement le repère visuel de leur position sur la page. Sans focus visible, ils naviguent à l'aveugle.
Garde le focus, ou remplace-le par quelque chose de plus élégant, mais ne le supprime jamais complètement.

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

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

Astuce : tu peux aussi utiliser :focus-visible pour styliser uniquement quand le focus est clavier et non souris.

Les techniques avancées pour briller

Les attributs ARIA

Au lieu de <div> partout, utilise les attributs ARIA et les bons éléments HTML pour structurer ton contenu :

<main role="main">
  <section aria-labelledby="products-title">
    <h2 id="products-title">Nos produits</h2>
    <!-- Contenu ... -->
  </section>
</main>
<aside role="complementary">
  <!-- Sidebar -->
</aside>

Voici un trick que peu de développeurs connaissent, mais que les utilisateurs de lecteurs d'écran adorent :

<a href="#main-content" class="skip-link">Aller au contenu principal</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;
}

Ce lien n'apparaît seulement quand on navigue au clavier. Génial pour l'UX des lecteurs d'écran.

Tester son site

Le test des 5 secondes

Le test ultime : ferme les yeux, navigue sur ton site uniquement au clavier pendant 5 secondes. Si tu n'arrives pas à comprendre où tu es, c'est que ton site n'est pas accessible.

Tests automatisés

Tu peux utiliser axe-core pour automatiser tes tests d'accessibilité

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);
  });

Les extensions navigateur

axe DevTools : Le must-have pour détecter les problèmes d'accessibilité
Wave : Outil fourni par WebAIM pour la visualisation des erreurs
Lighthouse : Audit complet avec score d'accessibilité directement dans Chrome
Simuler un daltonisme : Directement dans la console DevTools de Chrome

En bref : les règles d'or pour survivre à l'EAA

Teste systématiquement : Intègre l'accessibilité dans ton workflow de développement
Pense sémantique : Utilise les bonnes balises HTML plutôt que des <div> et des <span> à toutes les sauces
Contraste minimum : 4.5:1 minimum pour le texte
Navigation clavier : Tous tes éléments interactifs doivent être utilisables au clavier
Enrichissement sémantique : Utilise les attributs ARIA à bon escient
Textes alternatifs : Décris ce qui est sur l'image, pas le lien ou un texte générique

Ma conclusion personnelle

L'accessibilité web, c'est comme apprendre à conduire : au début, ça semble contraignant et compliqué. Mais une fois que tu as pris le pli, ça devient naturel et tu te demandes comment tu faisais avant.

L'EAA nous force à grandir, et franchement, il était temps. Alors autant prendre les devants plutôt que d'attendre la première amende pour s'y mettre sérieusement. Et bonus : Google adore ça. Tu fais plaisir aux utilisateurs ET aux robots. Le combo ultime.

L'accessibilité, ce n'est pas un fardeau. C'est une opportunité de mieux coder. Et c'est (enfin) la loi.