Guides Guide complet

Comment rendre un site web accessible : guide étape par étape

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 alt descriptif à 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 un aria-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é via for/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: none sans 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 :

  1. Relancez un audit automatisé avec RGAA Test — comparez avec vos résultats initiaux, vous devriez voir la différence
  2. Testez manuellement les parcours critiques avec un lecteur d'écran
  3. Faites tester par des utilisateurs en situation de handicap si possible — leur retour est irremplaçable
  4. 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.
Ça dépend vraiment de la taille du projet. Pour un site de 10-20 pages, comptez 2 à 4 semaines de corrections si vous avez une personne dédiée. Pour un site complexe type e-commerce ou application web, on parle plutôt de 3 à 6 mois. Mais l'audit initial avec RGAA Test, lui, prend quelques minutes — c'est le meilleur moyen de voir où vous en êtes sans engagement.
Non, et c'est une bonne nouvelle ! Dans la grande majorité des cas, les corrections se font sur le site existant. Les erreurs les plus courantes — alt manquants, contrastes insuffisants, labels absents — se corrigent sans refonte. J'ai rarement vu un site nécessiter une reconstruction complète pour l'accessibilité.
L'objectif légal, c'est 100 % sur les critères applicables. Concrètement, visez d'abord 75 % — c'est déjà un bon niveau qui couvre les problèmes majeurs. Ensuite, progressez vers les 100 %. Le schéma pluriannuel vous permet de planifier cette montée en conformité sur 3 ans, donc pas de pression à tout régler du jour au lendemain.

Testez la conformité de votre site

Scannez votre site et obtenez un rapport détaillé avec recommandations IA.

Scanner mon site - 15€