Une checklist WCAG 2.2 interactive des 55 critères de succès de niveau A et AA, chacun avec une explication simple, un test et un correctif, plus un vérificateur de contraste des couleurs WCAG.
Pour la plupart des sites, une checklist WCAG couvre les 55 critères de succès de niveau A et AA de WCAG 2.2 (le critère 4.1.1 Analyse syntaxique a été supprimé). Contrôles clés : un contraste du texte d'au moins 4.5:1 (3:1 pour le grand texte), une utilisation complète au clavier, un focus visible, des champs étiquetés, des sous-titres et des cibles d'au moins 24 par 24 pixels CSS.
WCAG 2.2 en un coup d'œil
Voici la version pratique d'un audit d'accessibilité : chaque critère de succès de niveau A et AA de WCAG 2.2, regroupé par principe, avec ce qu'il signifie en termes simples, comment le tester en quelques minutes et un correctif en code lorsque le code aide. Cochez les éléments au fur et à mesure, filtrez par niveau ou par principe, puis imprimez le résultat.
Être conforme au niveau AA signifie satisfaire 55 critères : 31 de niveau A et 24 de niveau AA. WCAG 2.2 compte 86 critères au total si l'on inclut les 31 critères de niveau AAA, après que le critère 4.1.1 Analyse syntaxique a été déclaré obsolète et supprimé.
Le critère 1.4.3 demande 4.5:1 entre le texte normal et son arrière-plan, et 3:1 pour le grand texte, c'est-à-dire au moins 18 points (24 pixels CSS) ou 14 points en gras (environ 18.66 pixels CSS). Le critère 1.4.11 demande 3:1 pour les icônes, les bordures de champs et les indicateurs de focus.
Aucune checklist ne peut le garantir. Les lois varient selon les pays et les secteurs, et certaines s'appuient sur WCAG 2.1 ou sur leurs propres référentiels. Utilisez cette page pour repérer et corriger les obstacles, et consultez un juriste pour les questions de conformité.
WCAG 2.2 a ajouté neuf critères, dont six de niveau A ou AA : Focus non masqué (minimum), Mouvements de glissement, Taille de la cible (minimum), Aide cohérente, Saisie redondante et Authentification accessible (minimum). Il a aussi supprimé le critère 4.1.1 Analyse syntaxique.
Chaque couleur est convertie en luminance relative en linéarisant les canaux rouge, vert et bleu et en les pondérant par 0.2126, 0.7152 et 0.0722. Le ratio correspond à la luminance la plus claire plus 0.05, divisée par la plus sombre plus 0.05, ce qui donne une valeur de 1:1 à 21:1.
Masqué jusqu'à recevoir le focus, puis affiché en haut. Appuyez sur Tab dans le résultat pour le voir.
focus-visible affiche l'anneau pour les utilisateurs du clavier. La couleur du contour doit atteindre 3:1 par rapport à l'arrière-plan.
scroll-padding réserve de l'espace pour que les éléments ayant le focus, une fois défilés dans la vue, ne soient pas cachés sous la barre.
Agrandissez les petits boutons d'icône jusqu'à 24 par 24 pixels CSS. 44 pixels est la cible AAA, plus stricte et plus confortable sur téléphone.
Collez ceci dans les outils de développement. Ce sont les valeurs citées par le critère ; le contenu doit rester lisible une fois qu'elles sont appliquées.
Le message est du texte, se trouve à côté du champ, explique comment corriger et est relié avec aria-describedby.
Une zone role=status est annoncée poliment quand son texte change, sans déplacer le focus.
Arrêter les mouvements en lecture automatique pour les personnes qui demandent moins d'animation aide aussi pour Mettre en pause, arrêter, masquer.
Des valeurs autocomplete correctes et aucun blocage du collage permettent de se connecter sans se souvenir d'un mot de passe.
Les images, icônes et contrôles ont une alternative textuelle ; la décoration est masquée.
Vérifiez chaque alt d'img, nom de bouton d'icône et résumé de graphique.
L'audio seul a une transcription ; la vidéo muette a une transcription ou une piste audio.
Repérez chaque podcast ou clip muet et cherchez son alternative.
Les vidéos enregistrées avec du son ont des sous-titres synchronisés.
Lisez les vidéos avec les sous-titres activés ; vérifiez leur exactitude, pas seulement leur présence.
Les informations uniquement visuelles de la vidéo sont décrites ou proposées sous forme de texte.
Regardez les yeux fermés ; perd-on quelque chose d'important ?
Les diffusions en direct avec du son ont des sous-titres.
Vérifiez que le lecteur ou le service en direct prend en charge les sous-titres en temps réel.
Les vidéos enregistrées ont une audiodescription quand les images portent du sens.
Cherchez une version décrite ou une narration qui couvre le texte affiché à l'écran.
Titres, listes, tableaux et étiquettes sont balisés, pas seulement stylés.
Inspectez les titres, les listes, les en-têtes de tableau et les associations d'étiquettes.
L'ordre de lecture dans le code correspond au sens.
Désactivez le CSS ou utilisez le mode navigation d'un lecteur d'écran et lisez de haut en bas.
Les instructions ne reposent pas uniquement sur la forme, la couleur, la taille, la position ou le son.
Cherchez dans les textes des formules comme le bouton rond ou à droite.
Le contenu fonctionne en portrait et en paysage, sauf si l'un est essentiel.
Tournez un téléphone ou émulez les deux orientations.
Les champs de données personnelles déclarent leur finalité pour que les navigateurs puissent les remplir automatiquement.
Vérifiez que les champs nom, email, téléphone et adresse portent des valeurs autocomplete.
La couleur n'est jamais le seul moyen d'indiquer un sens, un état ou un lien.
Affichez en niveaux de gris ; les erreurs et les liens restent-ils distinguables ?
Un son qui se lance seul pendant plus de 3 secondes peut être mis en pause ou coupé.
Chargez chaque page avec le son activé.
Le contraste du texte est d'au moins 4.5:1, ou 3:1 pour le grand texte.
Mesurez les paires texte et arrière-plan avec le vérificateur de contraste ci-dessous.
Le texte peut être agrandi à 200 pour cent sans perte de contenu ni de fonctionnalité.
Zoomez à 200 pour cent ; rien ne doit être coupé ni se chevaucher.
Du vrai texte est utilisé au lieu d'images de texte, logos exceptés.
Cherchez les bannières et les boutons qui sont des images.
Le contenu tient sur 320 pixels CSS de large sans défilement dans les deux sens.
Zoomez à 400 pour cent sur une largeur de 1280 pixels.
Les icônes, bordures de champs, anneaux de focus et éléments de graphiques atteignent 3:1.
Mesurez les bordures et les icônes par rapport à ce qui les entoure.
Rien ne casse quand on augmente l'interligne, l'espacement des paragraphes, des lettres et des mots.
Appliquez le bookmarklet d'espacement du texte ou la surcharge CSS ci-dessous.
Les infobulles peuvent être fermées, survolées et restent affichées jusqu'à ce qu'on s'en éloigne.
Survolez une infobulle, déplacez-vous dedans, appuyez sur Échap.
Tout fonctionne avec le clavier seul.
Débranchez la souris et effectuez chaque tâche.
Le focus peut toujours quitter n'importe quel composant.
Entrez avec Tab dans les widgets, contenus intégrés et boîtes de dialogue, puis ressortez-en.
Les raccourcis à une touche peuvent être désactivés, réaffectés ou ne fonctionner qu'au focus.
Listez les raccourcis qui utilisent une lettre ou un chiffre sans touche de modification.
Les limites de temps peuvent être désactivées, ajustées ou prolongées.
Repérez les expirations de session et les étapes chronométrées.
Le contenu en mouvement, clignotant ou mis à jour automatiquement peut être mis en pause.
Cherchez les carrousels, les bandeaux défilants et les arrière-plans animés.
Rien ne clignote plus de trois fois par seconde.
Examinez les vidéos et animations à la recherche d'effets stroboscopiques.
Un lien d'évitement ou des repères permettent de sauter les blocs répétés.
Appuyez une fois sur Tab au chargement et cherchez Aller au contenu.
Chaque page a un titre qui la décrit.
Lisez les titres des onglets du navigateur sur tout le site.
Le focus se déplace dans un ordre qui préserve le sens et l'utilisation.
Parcourez avec Tab et repérez les sauts.
Le texte du lien, avec son contexte, indique où il mène.
Listez tous les liens ; signalez les Cliquez ici et Lire la suite isolés.
Il existe plus d'un moyen de trouver une page, comme un menu et une recherche ou un plan du site.
Vérifiez la présence d'une recherche, d'un plan du site ou d'un menu complet.
Les titres et les étiquettes décrivent leur sujet ou leur finalité.
Lisez la structure des titres seule ; est-elle compréhensible ?
L'indicateur de focus clavier est visible.
Parcourez avec Tab ; vous devez toujours voir où vous êtes.
Un élément ayant le focus n'est pas entièrement caché par des barres fixes ou des bannières.
Naviguez avec Tab en affichant une bannière de cookies et un en-tête fixe.
Les gestes de tracé ou multipoints ont une alternative à pointeur unique.
Vérifiez que les interactions de pincement, balayage et dessin ont des boutons.
Les actions se déclenchent au relâchement, ou peuvent être interrompues ou annulées.
Appuyez, glissez hors de l'élément, relâchez ; rien ne doit se déclencher.
Le nom accessible contient le texte de l'étiquette visible.
Comparez les étiquettes visibles avec les noms calculés dans les outils de développement.
Les fonctions déclenchées en secouant ou en inclinant ont un bouton alternatif et peuvent être désactivées.
Cherchez les fonctions liées au mouvement de l'appareil.
Tout ce qui se fait par glissement peut aussi se faire par de simples clics ou appuis.
Essayez les curseurs, listes triables et cartes sans glisser.
Les cibles font au moins 24 par 24 pixels CSS, ou sont espacées pour qu'un cercle de 24 pixels ne chevauche pas les autres, avec des exceptions.
Mesurez les petites icônes et les contrôles en ligne.
La page déclare sa langue principale.
Vérifiez l'attribut lang sur l'élément html.
Les passages dans une autre langue sont balisés avec lang.
Repérez les citations ou expressions dans d'autres langues.
Donner le focus à un élément ne change pas le contexte.
Placez le focus sur chaque contrôle avec Tab ; rien ne doit être envoyé ni changer de page.
Modifier un réglage ne change pas le contexte sans avertissement.
Modifiez les listes déroulantes et les boutons radio ; guettez une navigation inattendue.
La navigation répétée garde le même ordre relatif.
Comparez les menus sur plusieurs pages.
Les composants ayant la même fonction sont étiquetés de la même façon.
Comparez les contrôles de recherche, de panier et de téléchargement d'une page à l'autre.
Les options d'aide répétées apparaissent dans le même ordre relatif.
Comparez l'emplacement des liens de contact, de discussion ou d'aide sur chaque page.
Les erreurs de saisie sont identifiées et décrites sous forme de texte.
Envoyez les formulaires vides et avec des données incorrectes.
Les champs ont des étiquettes ou des instructions lorsqu'une saisie est attendue.
Vérifiez que chaque champ a une étiquette visible et des indications de format.
Quand une correction est connue, le message d'erreur la suggère.
Lisez le texte d'erreur ; indique-t-il comment corriger la saisie ?
Les envois importants peuvent être annulés, vérifiés ou confirmés.
Parcourez le paiement et la suppression de compte.
Les informations déjà saisies dans un processus sont préremplies ou sélectionnables.
Cherchez des champs d'adresse ou d'email répétés dans un même parcours.
La connexion n'exige pas de test de mémoire ou d'énigme sans alternative, et le collage est autorisé.
Essayez de coller un mot de passe ; vérifiez qu'il existe une option sans énigme.
Les contrôles personnalisés exposent leur nom, leur rôle et leur état aux technologies d'assistance.
Inspectez les widgets personnalisés dans l'arbre d'accessibilité.
Les messages d'état sont annoncés sans déplacer le focus.
Déclenchez un ajout au panier ou des résultats de recherche et écoutez.
Perceptible
Utilisable
Compréhensible
Robuste
Checklist interactive WCAG 2.2 A et AA
Imprimer ou enregistrer en PDF
Filtrer par niveau
Filtrer par principe
Tous les niveaux
Niveau {level}
Tous les principes
{ticked} critères cochés sur {shown} affichés. Les coches ne sont conservées que tant que cet onglet est ouvert.
Test :
Conforme
Non conforme
Sélecteur {label}
{label} hex
Vérificateur de contraste des couleurs WCAG
Utilise la formule de luminance relative des définitions de WCAG 2.2. Saisissez des couleurs hex à six chiffres.
Texte
Arrière-plan
Exemple de texte normal, 16 pixels, graisse normale.
Exemple de grand texte, 24 pixels.
Ratio de contraste {ratio}:1
Saisissez deux couleurs hex valides, comme #1f2937.
Résultat par rapport aux seuils AA
Usage
Exige
Résultat
Texte normal (1.4.3)
Grand texte (1.4.3)
Icônes, bordures, anneaux de focus (1.4.11)
Texte normal, AAA (1.4.6)
Commencer gratuitement · Sans carte bancaire