RGAA : les 10 erreurs d'accessibilité que je corrige sur presque tous les sites

Pourquoi cet article

Quand je fais un audit d'accessibilité, je retrouve presque toujours les mêmes problèmes. Pas des cas complexes : des oublis simples, répétés sur toutes les pages, qui suffisent à rendre un site inutilisable pour une partie des visiteurs.

Le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) est la déclinaison française des WCAG, les règles internationales d'accessibilité du web. Sa version 4.1 compte 106 critères répartis en 13 thématiques. Ça paraît beaucoup, mais une dizaine d'erreurs représentent l'essentiel de ce qu'on corrige en pratique.

1. Des images sans alternative pertinente

L'attribut alt est lu par les lecteurs d'écran à la place de l'image. Deux erreurs opposées reviennent souvent : l'oublier, ou le remplir avec un texte inutile (alt="image", alt="photo-header-v2.jpg").

La règle est simple : l'alternative dépend du rôle de l'image, pas de son contenu visuel.

<!-- Décorative : ignorée par les lecteurs d'écran -->
<img src="/fond-vague.svg" alt="" />

<!-- Lien : on décrit la destination -->
<a href="/"><img src="/logo.svg" alt="Accueil — Nicolas Caux" /></a>

2. Des contrastes de couleurs insuffisants

Un texte gris clair sur fond blanc, c'est élégant sur une maquette et illisible pour beaucoup de monde : personnes malvoyantes, mais aussi n'importe qui sur un téléphone en plein soleil.

Les seuils à retenir (niveau AA) :

• 4,5:1 pour le texte courant ;
• 3:1 pour le texte de grande taille (24 px, ou 18,5 px en gras) ;
• 3:1 pour les éléments d'interface (bordure d'un champ, icône seule, état d'un bouton).

3. Des liens et des boutons qui ne disent pas ce qu'ils font

Les utilisateurs de lecteurs d'écran naviguent souvent en listant tous les liens d'une page. Une liste de cinq « En savoir plus » ne leur apprend rien.

4. Des div cliquables à la place de vrais boutons

<!-- ❌ Ni focusable, ni activable au clavier, ni annoncé comme bouton -->
<div class="btn" onclick="ouvrirMenu()">Menu</div>

<!-- ✅ Tout est gratuit : focus, Entrée/Espace, rôle annoncé -->
<button type="button" onclick="ouvrirMenu()">Menu</button>

Une div avec un onclick fonctionne à la souris, et c'est tout. Un <button> est focusable, s'active avec Entrée et Espace, et il est annoncé comme un bouton. Pour reproduire ça sur une div, il faut role, tabindex et la gestion du clavier en JavaScript. Le bon élément HTML fait déjà tout ce travail.

Le repère : un lien emmène ailleurs (<a href>), un bouton déclenche une action sur la page (<button>).

5. Un focus invisible

Le fameux outline: none ajouté pour supprimer le contour « moche » au clic. Résultat : une personne qui navigue au clavier ne sait plus du tout où elle se trouve dans la page.

La solution moderne est :focus-visible. Le contour n'apparaît que pendant la navigation au clavier, pas au clic de souris :

:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 3px;
}

6. Une hiérarchie de titres cassée

Les titres h1 à h6 servent de table des matières aux lecteurs d'écran. On les choisit souvent pour leur taille visuelle, ce qui donne des pages qui passent d'un h1 à un h4, ou qui ont trois h1.

• Un seul h1 par page, qui décrit son contenu ;
• pas de niveau sauté : un h3 suit un h2, jamais directement un h1 ;
• la taille visuelle se gère en CSS, pas en changeant de niveau de titre.

7. Des formulaires sans vrais labels

Le placeholder n'est pas un label : il disparaît dès qu'on tape, il est souvent peu contrasté, et il n'est pas toujours lu. Chaque champ a besoin d'un <label> relié par for/id, et chaque message d'erreur doit être relié au champ concerné.

<label for="email">Adresse e-mail</label>
<input
	id="email"
	type="email"
	autocomplete="email"
	aria-describedby="email-erreur"
	aria-invalid="true"
/>
<p id="email-erreur">Le format attendu est nom@exemple.fr</p>

8. La langue de la page oubliée

Sans lang="fr" sur la balise <html>, un lecteur d'écran réglé en anglais lira ton texte français avec un accent... très approximatif. Même logique pour un passage dans une autre langue : <span lang="en">Design System</span>.

C'est une ligne de code, et c'est l'une des erreurs que je rencontre le plus souvent.

9. Des liens qui ouvrent un nouvel onglet sans prévenir

Ouvrir un nouvel onglet casse le bouton « retour » et peut désorienter. Si c'est vraiment nécessaire (un lien vers un site externe, par exemple), il faut l'annoncer :

<a href="https://doqo.fr/" target="_blank" rel="noopener noreferrer">
	Voir le site
	<img src="/assets/icons/linkout.svg" alt="(nouvel onglet)" />
</a>

C'est exactement ce que fait ce portfolio sur les liens « Voir le site » des projets : l'icône porte l'information, et elle est lue par les lecteurs d'écran.

10. Des animations impossibles à arrêter

Les animations au scroll, les carrousels automatiques et les effets de parallaxe peuvent provoquer des nausées ou des vertiges chez certaines personnes. Les systèmes d'exploitation proposent un réglage « réduire les animations » : respecte-le.

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

Et pour tout contenu qui bouge tout seul plus de 5 secondes (carrousel, vidéo d'arrière-plan), prévois un bouton pause.

Comment tester rapidement

Les outils automatiques (Lighthouse, axe DevTools, WAVE) sont un bon point de départ, mais ils ne détectent qu'une partie des problèmes. Ils savent qu'un alt existe, pas s'il est pertinent.

En résumé

La bonne nouvelle, c'est qu'aucune de ces corrections ne demande de refonte. La plupart tiennent en une ligne de HTML ou de CSS — et elles rendent le site meilleur pour tout le monde, pas seulement pour les personnes en situation de handicap.