Rendre un site accessible : par où commencer ?
106 critères RGAA. Rien que le chiffre peut donner le vertige. J'ai vu des équipes entières se figer devant la grille d'audit en se demandant « mais par où on commence ? ». Ne paniquez pas. L'accessibilité, ça se mange par petits morceaux, et vous allez voir, c'est plus logique qu'il n'y paraît. Ce guide va vous accompagner étape par étape.
Étape 1 : Réaliser un audit initial
Audit automatisé
Avant de corriger quoi que ce soit, il faut savoir où vous en êtes. Lancez un diagnostic automatisé avec RGAA Test (rgaa-test.fr) — c'est l'affaire de quelques minutes et vous aurez déjà une photo claire de la situation. Les outils automatisés ne détectent qu'environ 30 à 40 % des erreurs, mais c'est un bon point de départ :
- Images sans texte alternatif
- Contrastes insuffisants
- Formulaires sans labels
- Structure de titres incorrecte
- Absence de langue définie
Audit manuel complémentaire
Concrètement, un outil automatisé ne peut pas tout voir. Il faut aussi mettre les mains dans le cambouis :
- Navigation clavier : débranchez votre souris et parcourez tout le site avec Tab, Shift+Tab, Entrée et Échap. Vous avez déjà essayé de naviguer sans souris ? Non ? Faites-le 5 minutes, vous allez comprendre beaucoup de choses
- Lecteur d'écran : testez avec NVDA (Windows, gratuit) ou VoiceOver (Mac, intégré). La première fois que j'ai testé avec NVDA, j'ai compris pourquoi les utilisateurs galèrent
- Zoom : agrandissez à 200 % et vérifiez que rien ne déborde ni ne se chevauche
- Désactivation CSS : vérifiez que le contenu reste lisible dans l'ordre logique — c'est tout bête mais ça révèle des surprises
Étape 2 : Corriger les bases (niveau A)
Images (Thème 1)
C'est souvent le premier chantier, et c'est un bon début :
- Ajoutez un
altdescriptif à chaque image informative - Mettez un
alt=""vide sur les images de décoration (oui, vide, pas absent !) - Vérifiez les icônes SVG : ajoutez
role="img"et unaria-label— le piège classique, celui-là
Couleurs (Thème 3)
- Vérifiez les contrastes : ratio minimum 4.5:1 pour le texte normal, 3:1 pour le grand texte. Votre joli gris clair sur fond blanc ? Il y a de grandes chances qu'il ne passe pas
- L'information ne doit pas être transmise uniquement par la couleur — pensez aux 3,2 millions de daltoniens en France
Structure (Thèmes 8 et 9)
La structure, c'est le squelette de votre page. Si elle est bancale, tout le reste souffre :
- Un seul
<h1>par page, hiérarchie logique h1 → h2 → h3 (pas de saut de h1 à h3, on ne triche pas) - Utilisez les landmarks HTML5 :
<header>,<nav>,<main>,<footer> - Définissez la langue avec
<html lang="fr">— une ligne de code, un impact énorme - Chaque page doit avoir un
<title>unique et descriptif
Formulaires (Thème 11)
J'ai formé des équipes entières sur les formulaires et le moment « ah oui d'accord » arrive toujours au même endroit : quand ils réalisent que le placeholder n'est PAS un label.
- Chaque champ doit avoir un
<label>visible et associé viafor/id - Les champs obligatoires doivent être indiqués en texte (pas juste une astérisque rouge)
- Les messages d'erreur doivent identifier le champ et proposer une correction
Navigation (Thème 12)
- Ajoutez un lien d'évitement « Aller au contenu principal » — les utilisateurs clavier vous remercieront
- La navigation principale doit être dans une balise
<nav> - Un plan du site ou un moteur de recherche doit être disponible
Étape 3 : Approfondir (niveau AA)
Bon allez, les bases sont posées. Maintenant on passe au niveau supérieur :
- Sous-titres vidéo : toutes les vidéos avec son doivent avoir des sous-titres synchronisés (et non, les sous-titres auto de YouTube ne suffisent pas)
- Redimensionnement : le site doit fonctionner zoomé à 200 % sans rien casser
- Focus visible : l'indicateur de focus doit être visible sur tous les éléments interactifs — ne faites jamais de
outline: nonesans alternative - Texte des liens : chaque lien doit être compréhensible hors contexte. « Cliquez ici » ne dit rien à personne
Étape 4 : Tester et valider
Vous avez corrigé, bravo. Maintenant on vérifie que tout tient la route :
- Relancez un audit automatisé avec RGAA Test — comparez avec vos résultats initiaux, vous devriez voir la différence
- Testez manuellement les parcours critiques avec un lecteur d'écran
- Faites tester par des utilisateurs en situation de handicap si possible — leur retour est irremplaçable
- Documentez les résultats dans une grille d'audit RGAA
Étape 5 : Publier et maintenir
Et là, c'est pas fini — l'accessibilité, ce n'est pas un sprint, c'est un marathon :
- Publiez votre déclaration d'accessibilité (c'est une obligation légale)
- Ajoutez la mention de conformité sur la page d'accueil
- Mettez en place un mécanisme de signalement pour que les utilisateurs puissent remonter les problèmes
- Formez les contributeurs à la rédaction accessible — c'est souvent le maillon faible
- Intégrez les tests dans votre processus de déploiement pour ne pas régresser
L'accessibilité est un processus continu, pas un projet qu'on coche et qu'on oublie. Chaque nouveau contenu, chaque mise à jour doit respecter les critères RGAA. Mais vous êtes sur la bonne voie.