Checklist RGAA pour développeurs : les 20 erreurs à vérifier en priorité

Si tu développes un site web en France, tu es probablement concerné par le RGAA. Le référentiel comprend 106 critères, mais la réalité du terrain montre que 20 d'entre eux concentrent l'écrasante majorité des violations constatées lors des audits. Corriger ces 20 erreurs en priorité, c'est éliminer 80 % des non-conformités les plus critiques en un minimum de temps. Voici la checklist, avec pour chaque point : le critère RGAA concerné, ce qu'il faut vérifier, un exemple de code non conforme et le code corrigé.

Comment utiliser cette checklist

Parcours chaque point dans l'ordre. Pour chacun, vérifie ton site et corrige si nécessaire. Les erreurs sont classées par impact décroissant : les premières sont celles qui bloquent l'accès au contenu, les dernières sont celles qui dégradent l'expérience sans bloquer complètement.

Tu peux compléter cette vérification manuelle par un scan automatisé qui détecte la plupart de ces violations en quelques secondes. Un test d'accessibilité gratuit avec WebConforme couvre la grande majorité des points de cette checklist.

1. Images sans alternative textuelle

Critère RGAA 1.1 : Chaque image porteuse d'information a-t-elle une alternative textuelle ?

C'est la violation la plus fréquente. Une image sans attribut alt est invisible pour les lecteurs d'écran — l'utilisateur ne sait pas qu'elle existe ni ce qu'elle représente.

Non conforme :

<img src="promo-ete-2026.jpg">

Conforme :

<img src="promo-ete-2026.jpg" alt="Promotion été 2026 : -30% sur tous les audits accessibilité">

Cas particulier : les images décoratives. Si l'image n'apporte aucune information (trait de séparation, illustration purement esthétique), elle doit avoir un alt vide pour être ignorée par les lecteurs d'écran :

<img src="decoration.svg" alt="" role="presentation">

Vérification : inspecte chaque <img> de ta page. Si l'image transmet une information, l'attribut alt doit décrire cette information de façon concise (pas « image de... » ou « photo de... »). Si l'image est décorative, alt="".

2. Contrastes de couleurs insuffisants

Critère RGAA 3.2 : Le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé ?

Un contraste insuffisant rend le texte illisible pour les personnes malvoyantes, les personnes âgées et tout utilisateur en situation de luminosité ambiante élevée (écran en plein soleil).

Ratios minimaux RGAA :

• 4.5:1 pour le texte standard (inférieur à 24px ou 18.5px en gras)
• 3:1 pour le texte agrandi (supérieur ou égal à 24px ou 18.5px en gras)

Non conforme :

/* Ratio : 2.3:1 */
.text-light {
  color: #aaaaaa;
  background-color: #ffffff;
}

Conforme :

/* Ratio : 7.4:1 */
.text-accessible {
  color: #595959;
  background-color: #ffffff;
}

Vérification : utilise un outil comme Colour Contrast Analyser ou les DevTools de Chrome (onglet Elements > Styles > contraste affiché sur chaque couleur de texte). WebConforme détecte automatiquement tous les contrastes insuffisants sur la page scannée.

3. Champs de formulaire sans label

Critère RGAA 11.1 : Chaque champ de formulaire a-t-il une étiquette ?

Un champ sans label est inutilisable avec un lecteur d'écran. L'utilisateur entend « zone de texte, édition » sans savoir ce qu'il doit saisir. Le placeholder ne remplace pas un label : il disparaît dès que l'utilisateur commence à taper.

Non conforme :

<input type="email" placeholder="Votre email">

Conforme :

<label for="email">Adresse email</label>
<input type="email" id="email" name="email" autocomplete="email">

Vérification : pour chaque <input>, <select> et <textarea>, vérifie qu'il existe un <label> avec un attribut for qui correspond à l'id du champ. Ou, à défaut, un aria-label ou aria-labelledby (mais le <label> visible est toujours préférable).

4. Langue de la page non déclarée

Critère RGAA 8.3 : La langue par défaut est-elle présente ?

Sans l'attribut lang, les lecteurs d'écran ne savent pas dans quelle langue prononcer le contenu. Un texte français lu avec une synthèse vocale anglaise est incompréhensible.

Non conforme :

<html>
  <head>...</head>

Conforme :

<html lang="fr">
  <head>...</head>

Vérification : ouvre le code source de ta page et vérifie que la balise <html> contient lang="fr" (ou la langue appropriée). Pour les passages dans une autre langue, ajoute l'attribut lang sur l'élément concerné :

<p>Le concept de <span lang="en">responsive design</span> s'applique aussi à l'accessibilité.</p>

5. Structure de titres incohérente

Critère RGAA 9.1 : L'information est-elle structurée par l'utilisation appropriée de titres ?

Les lecteurs d'écran offrent une navigation par titres : l'utilisateur peut lister tous les titres de la page et sauter directement au contenu qui l'intéresse. Une structure de titres cassée (sauts de niveau, titres manquants) rend cette navigation impossible.

Non conforme :

<h1>Notre entreprise</h1>
<h3>Nos services</h3>  <!-- Saut de h1 à h3 -->
<h5>Audit accessibilité</h5>  <!-- Saut de h3 à h5 -->

Conforme :

<h1>Notre entreprise</h1>
<h2>Nos services</h2>
<h3>Audit accessibilité</h3>

Vérification : installe l'extension HeadingsMap (Chrome/Firefox) qui affiche la hiérarchie des titres d'une page. Vérifie qu'il n'y a pas de saut de niveau et qu'il n'y a qu'un seul <h1> par page.

6. Liens non explicites

Critère RGAA 6.1 : Chaque lien est-il explicite ?

Un lien dont l'intitulé est « cliquez ici », « en savoir plus » ou « lire la suite » ne dit rien de sa destination. L'utilisateur de lecteur d'écran qui navigue par la liste des liens entend une succession de « en savoir plus » sans aucun contexte.

Non conforme :

<a href="/audit">Cliquez ici</a>
<a href="/tarifs">En savoir plus</a>

Conforme :

<a href="/audit">Découvrir notre offre d'audit accessibilité</a>
<a href="/tarifs">Consulter nos tarifs</a>

Si le design impose un texte court, utilise aria-label :

<a href="/audit" aria-label="Découvrir notre offre d'audit accessibilité">En savoir plus</a>

Vérification : liste tous les liens de ta page. Chaque intitulé doit être compréhensible hors contexte. Si tu lis « cliquez ici » sans voir la page, sais-tu où le lien mène ? Non ? Il faut corriger.

7. Focus clavier invisible

Critère RGAA 10.7 : Pour chaque élément recevant le focus, la prise de focus est-elle visible ?

La ligne CSS outline: none sur tous les éléments est l'une des erreurs d'accessibilité les plus destructrices. Elle supprime l'indicateur visuel qui montre quel élément est actuellement actif au clavier. Sans cet indicateur, la navigation clavier est aveugle.

Non conforme :

*:focus {
  outline: none;
}

Conforme :

*:focus-visible {
  outline: 3px solid #4A90D9;
  outline-offset: 2px;
}

Note : focus-visible n'affiche l'indicateur que lors de la navigation clavier, pas lors d'un clic souris. C'est le meilleur compromis entre accessibilité et esthétique.

Vérification : navigue sur ton site uniquement au clavier (Tab, Shift+Tab, Entrée). À chaque appui sur Tab, tu dois voir clairement quel élément est actif. Si le focus est invisible, il faut corriger.

8. Navigation clavier impossible

Critère RGAA 7.3 : Chaque script est-il contrôlable par le clavier ?

Tout élément interactif doit être atteignable et activable au clavier. Les <div> et <span> avec des onclick ne sont pas focusables par défaut — les utilisateurs au clavier ne peuvent pas les atteindre.

Non conforme :

<div class="bouton" onclick="valider()">Valider</div>

Conforme :

<button type="button" onclick="valider()">Valider</button>

Si tu dois utiliser un <div> (composant custom), ajoute les attributs nécessaires :

<div role="button" tabindex="0" onclick="valider()" onkeydown="if(event.key==='Enter'||event.key===' ')valider()">
  Valider
</div>

Vérification : navigue sur toute la page avec Tab. Chaque bouton, lien, champ de formulaire et composant interactif doit être atteignable. Active-les avec Entrée ou Espace. Si un élément n'est pas atteignable ou activable au clavier, il faut corriger.

9. Titre de page absent ou non pertinent

Critère RGAA 8.6 : Le titre de page est-il pertinent ?

Le <title> est la première information lue par un lecteur d'écran quand une page se charge. C'est aussi ce qui apparaît dans l'onglet du navigateur et dans les résultats de recherche. Un titre générique (« Accueil », « Page 1 ») ou identique sur toutes les pages est une violation.

Non conforme :

<title>Mon site</title>

Conforme :

<title>Audit d'accessibilité web RGAA — WebConforme</title>

Vérification : ouvre chaque page de ton site dans un nouvel onglet. Le titre doit être unique, descriptif et commencer par l'information spécifique à la page (pas par le nom du site).

10. Iframes sans titre

Critère RGAA 2.1 : Chaque cadre a-t-il un titre de cadre ?

Une <iframe> sans attribut title est annoncée par le lecteur d'écran comme « cadre » sans aucune indication de son contenu. L'utilisateur ne sait pas s'il s'agit d'une carte, d'une vidéo, d'un formulaire tiers ou d'une publicité.

Non conforme :

<iframe src="https://www.google.com/maps/embed?..."></iframe>

Conforme :

<iframe src="https://www.google.com/maps/embed?..." title="Carte Google Maps de nos bureaux à Paris"></iframe>

Vérification : cherche toutes les <iframe> dans ton code. Chacune doit avoir un attribut title qui décrit son contenu de manière concise et informative.

11. Absence de lien d'évitement

Critère RGAA 12.7 : Un lien d'évitement ou d'accès rapide à la zone de contenu principal est-il présent ?

Sans skip-link, un utilisateur au clavier doit tabuler à travers l'intégralité du menu de navigation avant d'atteindre le contenu principal — à chaque page visitée.

Non conforme : absence totale de lien d'évitement.

Conforme :

<body>
  <a href="#main-content" class="skip-link">Aller au contenu principal</a>
  <header><!-- navigation --></header>
  <main id="main-content"><!-- contenu --></main>
</body>

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #1e40af;
  color: #fff;
  padding: 0.75rem 1.5rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;
}

Vérification : ouvre ta page et appuie sur Tab. Le premier élément focusable doit être un lien « Aller au contenu principal » (ou équivalent) qui, quand activé, déplace le focus vers le contenu principal.

12. ARIA utilisé à mauvais escient

Critère RGAA 7.1 : Chaque script est-il compatible avec les technologies d'assistance ?

La règle d'or d'ARIA : « Pas d'ARIA est meilleur que du mauvais ARIA. » Un role="button" sur un <div> sans gestion clavier est pire que rien — le lecteur d'écran annonce « bouton » mais l'utilisateur ne peut pas l'activer avec Entrée.

Non conforme :

<div role="button">Envoyer</div>
<!-- Annoncé comme "bouton" mais non focusable, non activable au clavier -->

Conforme :

<button type="submit">Envoyer</button>
<!-- Nativement focusable, activable avec Entrée et Espace -->

Règle : utilise toujours l'élément HTML natif quand il existe. N'ajoute ARIA que lorsque aucun élément natif ne correspond au pattern d'interaction souhaité (onglets, accordéons, menus complexes).

Vérification : cherche tous les attributs role, aria-* dans ton code. Pour chaque attribut ARIA, demande-toi : est-ce qu'un élément HTML natif pourrait faire le même travail ? Si oui, remplace. Si non, vérifie que toute la gestion clavier et les états ARIA associés sont implémentés.

13. Landmarks absents

Critère RGAA 9.2 : La structure du document est-elle cohérente ?

Les landmarks HTML5 (<header>, <nav>, <main>, <footer>, <aside>) permettent aux lecteurs d'écran de naviguer directement entre les zones principales de la page. Sans landmarks, l'utilisateur doit parcourir séquentiellement tout le contenu.

Non conforme :

<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

Conforme :

<header>...</header>
<nav aria-label="Navigation principale">...</nav>
<main>...</main>
<footer>...</footer>

Vérification : ouvre les DevTools et vérifie que ta page utilise les balises sémantiques <header>, <nav>, <main>, <footer>. S'il y a plusieurs <nav>, chacun doit avoir un aria-label unique (« Navigation principale », « Navigation secondaire », « Navigation pied de page »).

14. Erreurs de formulaire non signalées

Critère RGAA 11.10 : Le contrôle de saisie est-il utilisé de manière pertinente ?

Un champ en erreur signalé uniquement par une bordure rouge est invisible pour les personnes daltoniennes et les utilisateurs de lecteurs d'écran. Le message d'erreur doit être textuel et associé au champ.

Non conforme :

<input type="email" class="error-border" id="email">
<!-- La bordure rouge est le seul indicateur d'erreur -->

Conforme :

<label for="email">Adresse email</label>
<input type="email" id="email" aria-describedby="email-error" aria-invalid="true">
<p id="email-error" role="alert" class="error-message">
  Le format de l'adresse email est invalide. Exemple attendu : nom@domaine.fr
</p>

Vérification : soumets un formulaire avec des données invalides. Chaque champ en erreur doit afficher un message textuel visible, associé au champ via aria-describedby, et l'attribut aria-invalid="true" doit être présent.

15. Autocomplétion non déclarée

Critère RGAA 11.13 : La finalité de chaque champ de saisie peut-elle être déduite pour faciliter le remplissage automatique ?

L'attribut autocomplete aide les navigateurs et les technologies d'assistance à pré-remplir les formulaires. Pour les personnes avec des difficultés motrices ou cognitives, c'est une aide précieuse qui réduit considérablement l'effort de saisie.

Non conforme :

<input type="text" name="nom" id="nom">
<input type="text" name="mail" id="mail">

Conforme :

<input type="text" name="nom" id="nom" autocomplete="family-name">
<input type="email" name="mail" id="mail" autocomplete="email">

Valeurs courantes : given-name, family-name, email, tel, street-address, postal-code, country, organization, cc-number.

Vérification : pour chaque champ de formulaire qui collecte des informations personnelles, vérifie que l'attribut autocomplete est présent avec la bonne valeur.

16. Contenu transmis uniquement par la couleur

Critère RGAA 3.1 : L'information n'est-elle pas donnée uniquement par la couleur ?

Un statut « vert = actif, rouge = inactif » est invisible pour les personnes daltoniennes. L'information doit aussi être transmise par du texte, une icône ou une forme.

Non conforme :

<span class="status-green"></span> <!-- Seule la couleur indique le statut -->

Conforme :

<span class="status-green" aria-label="Statut : actif">
  <svg aria-hidden="true"><!-- icône de coche --></svg>
  Actif
</span>

Vérification : regarde ta page en simulant une vision en niveaux de gris (Chrome DevTools > Rendering > Emulate vision deficiencies > Achromatopsia). Toute information transmise par la couleur doit rester compréhensible sans couleur.

17. Vidéos sans sous-titres

Critère RGAA 4.3 : Chaque média temporel synchronisé pré-enregistré a-t-il des sous-titres synchronisés ?

Toute vidéo avec du contenu parlé doit avoir des sous-titres. Les sous-titres automatiques (YouTube, etc.) ne sont pas considérés comme conformes — ils doivent être vérifiés et corrigés manuellement.

Non conforme :

<video src="presentation.mp4" controls></video>

Conforme :

<video src="presentation.mp4" controls>
  <track kind="subtitles" src="sous-titres-fr.vtt" srclang="fr" label="Français" default>
</video>

Vérification : pour chaque vidéo sur ton site, vérifie la présence d'un élément <track kind="subtitles"> ou de sous-titres intégrés (incrustés). Les sous-titres doivent être synchronisés et complets.

18. Tableaux de données sans en-têtes

Critère RGAA 5.6 : Les en-têtes de colonnes et de lignes sont-ils correctement déclarés ?

Un tableau sans balises <th> est lu par les lecteurs d'écran comme une suite de cellules sans structure. L'utilisateur ne sait pas à quoi correspond chaque valeur.

Non conforme :

<table>
  <tr>
    <td>Produit</td>
    <td>Prix</td>
  </tr>
  <tr>
    <td>Audit basique</td>
    <td>49 €/mois</td>
  </tr>
</table>

Conforme :

<table>
  <caption>Tarifs des offres d'audit WebConforme</caption>
  <thead>
    <tr>
      <th scope="col">Produit</th>
      <th scope="col">Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Audit basique</td>
      <td>49 €/mois</td>
    </tr>
  </tbody>
</table>

Vérification : pour chaque <table> de données (pas les tableaux de mise en page), vérifie la présence de <th> avec scope="col" ou scope="row", et d'un <caption> décrivant le tableau.

19. Documents PDF non accessibles

Critère RGAA 13.7 : Les documents bureautiques en téléchargement sont-ils accessibles ?

Un PDF exporté depuis Word sans structure (pas de titres, pas de texte alternatif sur les images, pas de balisage) est illisible avec un lecteur d'écran. Si tu proposes un PDF en téléchargement, il doit être accessible ou accompagné d'une version HTML alternative.

Vérification : ouvre chaque PDF avec un lecteur d'écran ou avec l'outil de vérification d'accessibilité d'Adobe Acrobat. Les titres doivent être balisés, les images doivent avoir des alternatives textuelles, l'ordre de lecture doit être logique.

20. Deux systèmes de navigation minimum

Critère RGAA 12.1 : Chaque ensemble de pages dispose-t-il de deux systèmes de navigation différents au moins ?

Un site avec un menu de navigation mais sans moteur de recherche ni plan du site ne satisfait pas ce critère. Il faut au minimum deux des trois systèmes suivants :

• Menu de navigation
• Moteur de recherche
• Plan du site

Non conforme : un site avec uniquement un menu principal.

Conforme : un site avec un menu principal ET un moteur de recherche (ou un plan du site).

Vérification : identifie les systèmes de navigation présents sur ton site. Si tu n'en as qu'un seul, ajoute un moteur de recherche ou un plan du site.

Récapitulatif : la checklist en un coup d'oeil

#	Critère RGAA	Vérification	Détectable auto
1	1.1	Images alt	Oui
2	3.2	Contrastes	Oui
3	11.1	Labels formulaires	Oui
4	8.3	Langue lang	Oui
5	9.1	Hiérarchie titres	Oui
6	6.1	Liens explicites	Partiel
7	10.7	Focus visible	Partiel
8	7.3	Navigation clavier	Non
9	8.6	Titre de page	Oui
10	2.1	Iframes titre	Oui
11	12.7	Skip-link	Partiel
12	7.1	ARIA correct	Oui
13	9.2	Landmarks	Oui
14	11.10	Erreurs formulaire	Partiel
15	11.13	Autocomplétion	Oui
16	3.1	Info par couleur	Partiel
17	4.3	Sous-titres vidéo	Partiel
18	5.6	En-têtes tableaux	Oui
19	13.7	PDF accessibles	Non
20	12.1	Deux navigations	Non

Sur ces 20 points, 12 sont entièrement détectables par un outil automatisé et 5 sont partiellement détectables. Un scan avec WebConforme couvre donc la grande majorité de cette checklist en quelques secondes. Les 3 points restants (navigation clavier, PDF, double navigation) nécessitent une vérification manuelle.

Pour comprendre en détail chacun des 106 critères RGAA et pas seulement les 20 plus violés, consulte notre guide complet des 106 critères du RGAA. Et si tu veux savoir ce qu'est le RGAA avant de plonger dans la technique, commence par notre article RGAA, c'est quoi ?.

Conclusion

Ces 20 points ne couvrent pas l'intégralité du RGAA — il reste 86 critères. Mais ils représentent les violations les plus fréquentes et les plus impactantes. Si tu corriges ces 20 erreurs sur ton site, tu élimineras la majorité des non-conformités critiques et tu amélioreras considérablement l'expérience pour tous tes utilisateurs, pas seulement ceux en situation de handicap.

La première étape : lance un scan automatisé pour mesurer ta situation actuelle. Corrige ce qui est détecté. Puis passe aux vérifications manuelles (navigation clavier, lecteur d'écran, PDF). L'accessibilité n'est pas un projet ponctuel — c'est une pratique continue, intégrée dans chaque développement.

---

Vérifie les 12 premiers points de cette checklist en 30 secondes avec un scan gratuit sur webconforme.fr — sans inscription.