Checklist accessibilité web : 50 points et les critères RGAA
En Bref : L'essentiel à retenir
- Cette checklist couvre les 50 points les plus critiques parmi les 106 critères du RGAA, organisés en 10 catégories.
- Elle se répartit en deux temps : ce qui se décide en conception (couleurs, typographie, parcours) et ce qui se vérifie en recette (balisage, clavier, restitution).
- Chaque point est accompagné d'une méthode de vérification simple et d'un niveau de priorité.
- À utiliser systématiquement à chaque phase de projet : conception, développement, recette et maintenance.
Cette checklist pratique regroupe les 50 points essentiels pour garantir l'accessibilité de votre site web. Utilisez-la à chaque phase de vos projets pour vous assurer que rien n'est oublié.
Comment utiliser cette checklist
Cette liste couvre les vérifications les plus critiques, organisées par thème. Pour chaque point :
- Priorité Critique : Bloque complètement certains utilisateurs
- Priorité Haute : Impact significatif sur l'expérience
- Priorité Moyenne : Amélioration importante mais non bloquante
Un point mérite d'être posé d'emblée : cette liste ne remplace pas un audit. Le RGAA compte 106 critères, celle-ci en couvre les manifestations les plus fréquentes. Elle sert à ne plus livrer de défaut grossier, pas à déclarer une conformité.
Deux moments, deux listes
La même checklist ne se joue pas au même moment selon les points. Les séparer évite de découvrir en recette un problème qui se décidait en maquette.
| Phase | Ce qui s'y vérifie | Coût si on le rate |
|---|---|---|
| Conception | Contrastes, typographie, parcours, alternatives prévues | Reprise graphique complète |
| Développement | Balisage, étiquettes, ordre de tabulation | Correction ciblée |
| Recette | Restitution au lecteur d'écran, messages d'erreur | Retard de livraison |
Pour un audit complet des 106 critères RGAA, utilisez notre outil d'audit.
1. Images et médias (8 points)
Priorité Critique
- Textes alternatifs : Toutes les images informatives ont un attribut
altdescriptif - Images décoratives : Les images sans valeur informative ont un
altvide (alt="") - Vidéos sous-titrées : Les vidéos ont des sous-titres synchronisés
- Contrôle des médias : L'utilisateur peut mettre en pause/arrêter les contenus animés
Priorité Haute
- Images complexes : Les graphiques et infographies ont une description longue accessible
- Transcriptions : Les contenus audio disposent d'une transcription textuelle
- Pas d'autoplay : Les vidéos et audios ne démarrent pas automatiquement avec le son
Priorité Moyenne
- Audiodescription : Les vidéos avec informations visuelles essentielles ont une audiodescription
2. Structure et sémantique (7 points)
Priorité Critique
- Hiérarchie des titres : Un seul
<h1>par page, hiérarchie logique h1 > h2 > h3 - Landmarks : Utilisation de
<nav>,<main>,<header>,<footer>,<aside> - Listes balisées : Les listes utilisent
<ul>,<ol>,<dl>selon le contexte
Priorité Haute
- Langue de la page : L'attribut
langest présent sur la balise<html> - Changements de langue : Les passages en langue étrangère sont balisés avec
lang - Tableaux de données : Les tableaux ont des en-têtes
<th>et un<caption>
Priorité Moyenne
- Balises obsolètes : Pas de
<b>,<i>,<font>pour la mise en forme
3. Navigation et liens (6 points)
Priorité Critique
- Intitulés de liens : Chaque lien a un intitulé explicite (pas de "cliquez ici")
- Liens identiques : Les liens avec le même intitulé mènent à la même destination
- Skip link : Un lien d'évitement vers le contenu principal existe
Priorité Haute
- Navigation cohérente : Le menu principal est présent et cohérent sur toutes les pages
- Plusieurs moyens de navigation : Au moins 2 moyens pour trouver une page (menu, recherche, plan du site)
Priorité Moyenne
- Ordre des liens : L'ordre de tabulation des liens est logique
Astuce
Pour implémenter correctement un skip link, consultez notre guide dédié.
4. Formulaires (8 points)
Priorité Critique
- Labels associés : Chaque champ a un
<label>associé viafor/id - Champs obligatoires : Les champs requis sont identifiés (pas uniquement par la couleur)
- Messages d'erreur : Les erreurs sont clairement identifiées et expliquées
Priorité Haute
- Erreurs accessibles : Les messages d'erreur sont liés au champ via
aria-describedby - Format attendu : Le format de saisie est indiqué avant le champ
- Autocomplete : Les champs de saisie utilisent l'attribut
autocompleteapproprié
Priorité Moyenne
- Groupes de champs : Les champs liés sont regroupés avec
<fieldset>et<legend> - Validation côté client : Les validations sont accessibles et n'empêchent pas la soumission
Pour approfondir, consultez notre guide des formulaires accessibles.
5. Couleurs et contrastes (5 points)
Priorité Critique
- Contraste texte : Ratio minimum 4.5:1 pour le texte normal, 3:1 pour le grand texte
- Information non chromatique : L'information n'est pas transmise uniquement par la couleur
Priorité Haute
- Contraste composants : Les éléments d'interface ont un contraste de 3:1 minimum
- Contraste focus : L'indicateur de focus est visible (ratio 3:1 minimum)
Priorité Moyenne
- Mode contraste élevé : Le site reste utilisable avec les modes de contraste système
Pour tout savoir sur les contrastes, lisez notre article dédié.
6. Navigation clavier (6 points)
Priorité Critique
- Accès clavier : Tous les éléments interactifs sont atteignables au clavier
- Pas de piège clavier : L'utilisateur peut toujours sortir d'un élément au clavier
- Focus visible : L'indicateur de focus est toujours visible
Priorité Haute
- Ordre logique : L'ordre de tabulation suit l'ordre visuel logique
- Raccourcis clavier : Les raccourcis sont documentés et désactivables si nécessaire
Priorité Moyenne
- Gestion du focus : Le focus est correctement géré lors de l'ouverture/fermeture de modales
7. Contenu textuel (4 points)
Priorité Haute
- Titres de page : Chaque page a un
<title>unique et descriptif - Lisibilité : Le texte peut être agrandi à 200% sans perte de contenu
- Espacement du texte : Le contenu reste lisible avec un interligne augmenté
Priorité Moyenne
- Abréviations : Les abréviations sont expliquées à la première occurrence
8. Composants interactifs (5 points)
Priorité Critique
- États communiqués : Les états (expanded, selected, etc.) sont communiqués via ARIA
- Boutons vs liens : Les boutons sont des
<button>, les liens des<a>
Priorité Haute
- Cibles tactiles : Les zones cliquables font au moins 44x44 pixels
- Live regions : Les mises à jour dynamiques sont annoncées aux lecteurs d'écran
Priorité Moyenne
- Timeout géré : L'utilisateur peut prolonger ou désactiver les délais d'expiration
9. Documents et téléchargeables (3 points)
Priorité Haute
- PDF accessibles : Les PDF sont balisés et accessibles
- Alternatives : Les documents non accessibles ont une alternative HTML
Priorité Moyenne
- Format indiqué : Le format et le poids des fichiers sont indiqués avant téléchargement
10. Vérification globale (3 points)
Priorité Critique
- Déclaration d'accessibilité : Une déclaration conforme est publiée et accessible
- Moyen de contact : Un canal de signalement des problèmes d'accessibilité existe
Priorité Haute
- Compatibilité : Le site fonctionne avec les navigateurs et technologies d'assistance courants
Synthèse par priorité
| Priorité | Nombre de points | Impact |
|---|---|---|
| Critique | 18 | Bloque l'accès |
| Haute | 22 | Impact significatif |
| Moyenne | 10 | Amélioration |
Typographie et lisibilité
Ces points se décident en conception, et ce sont ceux qui coûtent le plus cher à reprendre ensuite.
- Taille de base : 16 px minimum pour le texte courant
- Interligne : au moins 1,5 fois la taille de police
- Espacement des paragraphes : au moins 2 fois la taille de police
- Espacement des lettres : au moins 0,12 fois la taille de police
- Zoom 200 % : contenu lisible et fonctionnel, sans perte d'information (critère RGAA 10.4)
- Reflow : aucun défilement horizontal à 320 px de large (critère RGAA 10.11)
- Unités relatives :
em,remou pourcentages plutôt que des pixels figés - Pas de texte justifié : les espaces irréguliers gênent la lecture
- Majuscules et italiques réservés aux titres courts, jamais à un paragraphe
Deux articles creusent ces points quand la checklist ne suffit plus : le choix de la police et la taille de texte à retenir.
Ce que la sobriété technique apporte
Un point rarement listé, et pourtant décisif : moins de JavaScript, c'est moins de surface de casse pour les technologies d'assistance. Partir d'une base qui fonctionne sans script, puis enrichir, coûte moins cher que de rattraper l'accessibilité d'un composant maison.
<!-- Fonctionne sans JavaScript, restitué correctement par défaut -->
<details>
<summary>Voir le détail</summary>
<p>Contenu supplémentaire</p>
</details>
- Chaque composant interactif a un équivalent natif envisagé avant d'être réécrit
- Le parcours principal fonctionne script désactivé ou dégrade proprement
Rattacher ces points aux critères RGAA
La question qui revient : ces 50 points, ça correspond à quels critères du référentiel ? Le rattachement n'est pas ligne à ligne, parce qu'un critère RGAA se vérifie sur toute la page quand un point de checklist porte sur un élément. L'ordre de grandeur est le suivant.
| Thème de la checklist | Critères RGAA concernés |
|---|---|
| Images et médias | 1.1 à 1.9, 4.1 à 4.13 |
| Structure et sémantique | 8.x et 9.x |
| Couleurs et contrastes | 3.1 à 3.3 |
| Formulaires | 11.1 à 11.13 |
| Navigation clavier | 7.3, 12.8, 12.9 |
| Tableaux de données | 5.1 à 5.8 |
Ce tableau sert à faire le pont, pas à remplacer la grille. Un point coché ici ne vaut pas un critère conforme : le critère porte sur toutes les occurrences de la page, y compris celles que vous n'avez pas regardées. La liste des 106 critères donne le détail de chacun avec ses tests.
Comment automatiser ces vérifications
Une partie de cette checklist peut être automatisée :
Points automatisables :
- Présence des attributs
alt - Contrastes de couleurs
- Structure des titres
- Labels de formulaires
- Présence du
lang
Points nécessitant une vérification manuelle :
- Pertinence des textes alternatifs
- Logique de l'ordre de tabulation
- Expérience avec lecteur d'écran
- Compréhensibilité des messages d'erreur
Utilisez notre outil d'audit automatisé pour couvrir rapidement les vérifications automatisables, puis complétez par une vérification manuelle des points subjectifs.
Note
Cette checklist couvre les points les plus critiques. Pour une conformité RGAA complète, les 106 critères doivent être vérifiés. Consultez le référentiel RGAA officiel pour la liste exhaustive.
Conclusion
Cette checklist couvre les défauts les plus fréquents et les plus bloquants. Intégrez-la deux fois dans le projet, en conception puis en recette, et vous cesserez de livrer les problèmes évidents.
Pour savoir par où commencer sur un site existant, lancez une analyse d'une page représentative : elle tranche seule la partie mécanique de cette liste, présence des étiquettes, contrastes, structure des titres, et vous laisse le temps pour ce qui demande un jugement. Le détail critère par critère se trouve dans nos guides pratiques.
Questions fréquentes
Une checklist de 50 points suffit-elle pour être conforme au RGAA ?
Non, et il faut le dire clairement. Le RGAA compte 106 critères, et une checklist condensée sert à défricher, pas à déclarer. Elle vous fait passer d'un site jamais regardé à un site dont les défauts les plus bloquants sont traités. La conformité, elle, suppose un audit sur un échantillon représentatif, critère par critère.
À quel moment du projet utiliser cette checklist ?
Deux fois, et pas sur les mêmes points. En conception, sur ce qui coûte cher à corriger après coup : contrastes, typographie, parcours clavier, alternatives prévues pour chaque média. En recette, sur ce qui ne s'observe que dans le code livré : balisage, ordre de tabulation, restitution au lecteur d'écran, messages d'erreur.
Quelle part de cette checklist un outil automatique peut-il vérifier ?
La présence des éléments, jamais leur pertinence. Un automate voit qu'une image porte un attribut alt, pas si cet alt décrit l'image ; il mesure un contraste, pas si l'ordre de lecture a du sens. Comptez l'automatisation comme un défrichage qui vous fait gagner du temps sur la partie mécanique, et gardez le jugement humain pour le reste.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
Le contraste entre la couleur du texte et la couleur de son arrière-plan doit être suffisamment élevé (4.5:1 pour le texte normal, 3:1 pour le grand texte).
Chaque champ de formulaire doit avoir une étiquette (label) qui lui est liée explicitement.
Vidéos RGAA sur ce thème
Pour voir ces sujets en action, regardez les épisodes vidéo correspondants :
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.