Accessibilité web : RGAA et WCAG en pratique

L'accessibilité numérique consiste à rendre un site utilisable par toutes les personnes, quel que soit leur handicap (visuel, auditif, moteur, cognitif) et les aides techniques qu'elles utilisent. En France, elle se vérifie avec le RGAA (référentiel général d'amélioration de l'accessibilité), construit sur le standard international WCAG du W3C ; elle est obligatoire pour les services publics, les grandes entreprises et, depuis le 28 juin 2025, pour de nombreux services en ligne du secteur privé. Ce chapitre explique les obligations, les référentiels, les vérifications à faire sur chaque page et les outils de test.

Pourquoi l'accessibilité concerne tout le monde

Derrière l'écran, les situations sont très variées :

Et tout le monde se retrouve un jour dans une situation de handicap temporaire ou liée au contexte : un bras dans le plâtre, un écran de téléphone en plein soleil, une vidéo regardée sans le son dans les transports, l'âge qui fatigue la vue. Un site accessible est un site plus facile pour tous ; il est aussi mieux compris par les moteurs de recherche, qui « lisent » la page à peu près comme un lecteur d'écran.

Ce que dit la loi

Pour le secteur public et les grandes entreprises. L'article 47 de la loi n° 2005-102 du 11 février 2005 impose l'accessibilité des services de communication au public en ligne aux administrations, aux organismes chargés d'une mission de service public et aux entreprises dont le chiffre d'affaires en France dépasse 250 millions d'euros. Ils doivent :

• rendre leurs sites, applications et documents conformes au RGAA ;
• publier une déclaration d'accessibilité et afficher dès la page d'accueil la mention « Accessibilité : totalement / partiellement / non conforme » ;
• publier un schéma pluriannuel de mise en accessibilité (sur trois ans) et un plan d'action annuel.

Depuis une ordonnance de 2023, l'Arcom contrôle ces obligations et peut, après mise en demeure, prononcer une sanction pouvant atteindre 50 000 € pour un service non accessible.

Pour les services du secteur privé (European Accessibility Act). La directive européenne (UE) 2019/882, dite European Accessibility Act, transposée en France par la loi n° 2023-171 du 9 mars 2023 et le décret n° 2023-931 du 9 octobre 2023, s'applique depuis le 28 juin 2025. Elle rend obligatoire l'accessibilité de nombreux produits et services vendus aux consommateurs, notamment :

• le commerce électronique (les sites et applications de vente en ligne) ;
• les services bancaires aux consommateurs ;
• les livres numériques et leurs logiciels de lecture ;
• certains éléments des services de transport de voyageurs (sites, applications, billetterie) ;
• les services de communications électroniques et l'accès aux services de médias audiovisuels.

Les microentreprises qui fournissent des services (moins de 10 personnes et un chiffre d'affaires annuel ou un total de bilan qui ne dépasse pas 2 millions d'euros) en sont exemptées.

WCAG 2.2 et RGAA 4.1 : les référentiels

Les WCAG (Web Content Accessibility Guidelines) sont le standard international, publié par le W3C. La version 2.2 date d'octobre 2023. Elles reposent sur quatre principes, qu'on retient avec le mot POUR :

Chaque critère a un niveau : A (minimum), AA (le niveau exigé par la loi, en France comme en Europe) et AAA (renforcé, rarement visé pour tout un site). La version 2.2 a notamment ajouté des critères sur la taille des cibles (au moins 24 × 24 pixels CSS, ou assez d'espace autour), le focus qui ne doit pas être caché par un bandeau collant, et l'authentification sans test cognitif (pouvoir coller son mot de passe, utiliser un gestionnaire).

Le RGAA traduit les WCAG en une méthode de vérification opérationnelle. Sa version en vigueur, la 4.1.2, compte 106 critères répartis en 13 thématiques :

Chaque critère est une question (« Chaque image porteuse d'information a-t-elle une alternative textuelle ? ») assortie de tests précis. Le taux de conformité d'un site donne sa mention : totalement conforme (tous les critères applicables respectés), partiellement conforme (au moins 50 %), non conforme (moins de 50 %, ou aucun audit).

Les points à vérifier sur chaque page

Tu n'as pas besoin de connaître les 106 critères par cœur pour écrire un site accessible. Ces vérifications couvrent la grande majorité des problèmes rencontrés sur les sites des petites organisations :

Pour le contraste, le rapport se calcule à partir de la luminance des deux couleurs ; il va de 1:1 (même couleur) à 21:1 (noir sur blanc). Quelques repères sur fond blanc :

Le « grand texte » des WCAG commence à 24 px, ou 18,66 px en gras (environ 18 points et 14 points).

Naviguer au clavier

Essaie : débranche ta souris et parcours ton site. Les touches à connaître :

Ce que tu dois constater : chaque lien, bouton et champ reçoit le focus, dans l'ordre de lecture, avec un indicateur bien visible ; aucun piège (un élément d'où l'on ne peut plus sortir au clavier) ; aucun élément cliquable à la souris qui soit inaccessible au clavier.

Les éléments natifs (<a href>, <button>, <input>, <select>, <textarea>, <summary>) sont accessibles au clavier sans rien faire. Un <div> ou un <span> cliquable ne l'est pas : c'est la cause la plus fréquente des problèmes de navigation au clavier. L'attribut tabindex corrige des cas particuliers :

Le lien d'évitement permet de sauter le menu, que l'on devrait sinon traverser à chaque page. Il est caché jusqu'à ce qu'il reçoive le focus :

<a class="lien-evitement" href="#contenu">Aller au contenu</a>
…
<main id="contenu">

.lien-evitement {
  position: absolute;
  left: 1rem;
  top: -10rem;                 /* hors de l'écran */
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  color: #0f766e;
}

.lien-evitement:focus {
  top: 1rem;                   /* apparaît au premier appui sur Tab */
}

Tester avec un lecteur d'écran

Rien ne remplace dix minutes d'écoute de ta propre page. Les lecteurs d'écran gratuits :

• NVDA sous Windows (gratuit, libre) : touche Insert (ou Verr. Maj selon la configuration) + F7 pour la liste des liens, des titres et des repères ; H pour passer au titre suivant, D au repère suivant, F au champ de formulaire suivant ;
• VoiceOver, intégré à macOS (Cmd+F5) et à iOS ;
• TalkBack, intégré à Android.

Écoute : le titre de la page est-il annoncé ? Les titres forment-ils un plan compréhensible ? Les images importantes sont-elles décrites, les décoratives ignorées ? Chaque bouton a-t-il un nom ? Chaque champ annonce-t-il son étiquette ? Les erreurs du formulaire sont-elles lues ?

Les outils d'audit

La déclaration d'accessibilité

Un organisme soumis à l'obligation publie, sur une page dédiée reliée depuis toutes les pages (le pied de page), une déclaration d'accessibilité. Elle indique :

• l'état de conformité au RGAA (totalement, partiellement ou non conforme) et le taux de conformité ;
• les résultats de l'audit : date, référentiel et version, pages testées, outils et technologies d'assistance utilisés ;
• les contenus non accessibles, avec les non-conformités et les éventuelles dérogations (charge disproportionnée, contenus non soumis) ;
• un moyen de contact pour signaler un problème ou obtenir le contenu sous une autre forme ;
• les voies de recours, notamment la saisine du Défenseur des droits.

La DINUM fournit un générateur de déclaration d'accessibilité en ligne. C'est un élément concret à citer dans ta réalisation « présence en ligne » pour l'E5 : la mention dans le pied de page, la page de déclaration, l'audit qui l'a précédée.

Exercices

<html>
<body>
  <div class="titre">Inscriptions</div>
  <img src="banniere.jpg">
  <p>Les champs en <span style="color:red">rouge</span> sont obligatoires.</p>
  <input type="text" placeholder="Nom" style="border-color:red">
  <input type="email" placeholder="E-mail">
  <div class="bouton" onclick="valider()">OK</div>
  <a href="reglement.pdf" target="_blank">Cliquez ici</a>
</body>
</html>