Liste de contrôle
WCAG 2.2 AA, sous forme de liste à dérouler
Les 55 critères de succès de niveau A et AA — l'ensemble visé par EN 301 549 et l'EAA. Séparés selon la seule distinction qui change votre après-midi : ce qu'un analyseur peut prouver et ce qu'une personne doit regarder.
23 automatisables · 32 demandent une personne
Comment s'en servir
- 1. Lancez d'abord une analyse. Elle règle la plupart des 23 critères automatisables en une minute, et elle est gratuite pour une page.
- 2. Déroulez la liste manuelle au clavier et au lecteur d'écran. Comptez une heure par gabarit, pas par page.
- 3. Notez ce que vous n'avez pas pu corriger, et pourquoi. Cette liste est votre déclaration d'accessibilité, et c'est ce qu'une autorité lit en premier.
Un analyseur peut prouver ceci
Chacun de ces critères est vérifié automatiquement à chaque analyse. Un résultat propre ici est une vraie preuve, et c'est la moins chère que vous obtiendrez.
Tout ce qui n'est pas du texte — une image, une icône, un graphique — a besoin d'une version textuelle qui dise la même chose.
image-alt · input-image-alt · aria-meter-name · aria-progressbar-name
Les enregistrements sonores seuls et les vidéos muettes ont besoin d'une alternative qui porte la même information.
audio-caption
Une vidéo enregistrée avec du son a besoin de sous-titres.
video-caption
La structure que vous montrez par la mise en page — titres, listes, tableaux, groupes — doit aussi exister dans le balisage.
aria-hidden-body · aria-required-children · aria-required-parent · td-has-header
Ne verrouillez pas la page sur une seule orientation d'écran.
css-orientation-lock
Les champs qui demandent les données personnelles de la personne devraient dire dans le code laquelle ils attendent.
autocomplete-valid
La couleur seule ne doit pas porter de sens.
link-in-text-block
Un son qui se lance seul pendant plus de trois secondes a besoin d'un moyen de l'arrêter.
no-autoplay-audio
Le texte a besoin d'un contraste d'au moins 4,5:1 avec son fond — 3:1 s'il est grand.
color-contrast
Le texte doit survivre à un agrandissement à 200 % sans perdre de contenu ni de fonction.
meta-viewport
La page doit continuer à fonctionner quand le lecteur augmente l'interligne et l'espacement des lettres.
avoid-inline-spacing
Tout ce que vous faites à la souris doit être faisable au clavier.
frame-focusable-content · scrollable-region-focusable · server-side-image-map
Si quelque chose est minuté, la personne doit pouvoir désactiver, ajuster ou prolonger le délai.
meta-refresh
Tout ce qui bouge, clignote, défile ou se met à jour tout seul plus de cinq secondes a besoin d'une commande de pause.
blink · marquee
Donnez un moyen de passer les blocs qui se répètent sur chaque page.
bypass
Chaque page a besoin d'un titre qui dise ce qu'est cette page.
document-title
Le texte d'un lien doit dire où il mène.
area-alt · link-name
Le nom accessible d'un contrôle doit contenir les mots qui y sont affichés.
label-content-name-mismatch
Les cibles tactiles doivent faire au moins 24 sur 24 pixels CSS, ou être suffisamment espacées.
target-size
La page doit déclarer dans quelle langue elle est.
html-has-lang · html-lang-valid · html-xml-lang-mismatch
Balisez les passages qui sont dans une autre langue que la page.
valid-lang
Chaque champ a besoin d'une étiquette, et d'une instruction là où le format ne va pas de soi.
form-field-multiple-labels
Chaque contrôle doit exposer ce qu'il est, comment il s'appelle et dans quel état il se trouve.
area-alt · aria-allowed-attr · aria-hidden-body · aria-required-attr
Ceci demande une personne
Aucun outil ne tranche cela. Il s'agit de sens et de comportement — si le texte alternatif dit la bonne chose, si l'ordre de tabulation correspond à la page, si un composant maison se comporte comme le motif qu'il imite. Quiconque annonce une couverture complète ne compte pas ceux-là.
- à la main1.2.3Niveau AAudio-description ou version de remplacement pour un média temporel (préenregistré)
Une vidéo enregistrée a besoin soit d'une audiodescription de ce qui est montré, soit d'une alternative textuelle.
Savoir si le son transmet tout ce que montre la vidéo est une décision humaine.
Le contenu sonore diffusé en direct a besoin de sous-titres en direct.
À vérifier à la main : utilisez un service de sous-titrage en direct — et une vélotypiste humaine dès que l'enjeu est important.
Une vidéo enregistrée a besoin d'une piste d'audiodescription.
À vérifier à la main : ajoutez une piste d'audiodescription, ou réenregistrez la narration pour qu'elle décrive ce qui se passe.
L'ordre dans lequel le contenu est lu doit avoir du sens.
Un analyseur ne peut pas deviner l'ordre que vous vouliez. Lisez la page une fois CSS désactivé.
N'expliquez rien uniquement par la forme, la taille, la position ou le son.
Celui-ci est entièrement un exercice de lecture. Aucun outil ne le détecte.
Utilisez du vrai texte, pas des images de texte.
Un analyseur ne voit pas le texte à l'intérieur d'une image. Celui-ci demande des yeux.
Le contenu doit se réorganiser dans une fenêtre de 320 px de large, sans barre de défilement horizontale.
À vérifier à la main : construisez la mise en page pour qu'elle se réorganise. si vous êtes déjà responsive, l'essentiel est fait.
Les éléments d'interface et les graphiques porteurs de sens ont besoin de 3:1 de contraste, pas seulement le texte.
À vérifier à la main : portez bordures, anneaux de focus et icônes à au moins 3:1 par rapport à ce qui est derrière.
Le contenu qui apparaît au survol ou au focus doit pouvoir être fermé, survolé et rester affiché.
À vérifier à la main : gardez-la ouverte tant que le pointeur est sur le déclencheur ou sur la bulle.
Le focus clavier ne doit jamais rester coincé quelque part dont on ne peut pas sortir.
Les pièges se trouvent en tabulant dans la page, pas en l'analysant.
Un raccourci fait d'une seule lettre doit pouvoir être désactivé ou remappé.
À vérifier à la main : exigez une touche de modification (ctrl, alt, cmd), ou n'écoutez que lorsque le contrôle concerné a le focus, ou laissez désactiver les raccourcis.
Rien ne doit clignoter plus de trois fois par seconde.
À vérifier à la main : restez sous trois flashs par seconde, ou sous les seuils de flash général et de flash rouge.
Le focus doit se déplacer dans un ordre qui préserve le sens.
Tabulez dans la page et regardez où va l'anneau de focus. C'est tout le test.
Proposez plus d'un moyen de trouver une page.
À vérifier à la main : ajoutez une recherche, un plan du site ou un fil d'ariane. deux chemins quelconques suffisent.
Les titres et les étiquettes doivent décrire ce qui les suit.
Un outil voit qu'un titre existe, pas s'il décrit quelque chose.
On doit pouvoir voir où se trouve le focus clavier.
À vérifier à la main : ne retirez jamais l'outline sans la remplacer. stylez `:focus-visible` plutôt que de supprimer `:focus`.
Un en-tête ou un pied de page collant ne doit pas masquer entièrement l'élément qui a le focus.
À vérifier à la main : ajoutez un `scroll-margin-top` égal à la hauteur de l'en-tête, ou réduisez l'élément collant au défilement.
Tout ce qui se fait par un geste à plusieurs doigts ou suivant un tracé doit aussi se faire d'une simple pression.
À vérifier à la main : ajoutez de simples boutons à côté du geste : zoom avant / arrière, précédent / suivant.
Une action ne doit pas se déclencher à l'appui — il faut pouvoir se rétracter.
À vérifier à la main : déclenchez au `click`, c'est-à-dire au relâchement — ou proposez une annulation.
Si secouer ou incliner l'appareil déclenche quelque chose, un contrôle doit faire la même chose.
À vérifier à la main : ajoutez le contrôle équivalent et laissez désactiver la commande par le mouvement.
Tout ce qui fonctionne par glissement doit aussi fonctionner sans glisser.
À vérifier à la main : ajoutez des boutons, un menu ou un champ de saisie qui font le même travail.
Donner le focus à quelque chose ne doit pas modifier la page tout seul.
À vérifier à la main : agissez à l'activation — un clic, entrée, ou un bouton explicite — jamais au seul focus.
Changer une valeur ne doit pas provoquer l'inattendu sans prévenir.
À vérifier à la main : ajoutez un bouton d'envoi, ou annoncez à l'avance ce que le contrôle va faire.
La navigation qui se répète d'une page à l'autre doit garder le même ordre.
À vérifier à la main : gardez l'ordre relatif stable. ajouter une entrée ne pose pas de problème ; les mélanger, si.
La même chose doit porter le même nom partout.
À vérifier à la main : choisissez un nom par notion et employez-le dans chaque étiquette, bouton, notification et titre.
Si de l'aide est proposée sur plusieurs pages, elle doit être au même endroit partout.
À vérifier à la main : gardez les mécanismes d'aide dans le même ordre relatif sur chaque page qui en a.
Quand une saisie est refusée, dites en toutes lettres quel champ et ce qui ne va pas.
À vérifier à la main : nommez le champ et le problème : « code postal : cinq chiffres, par exemple 75001 ».
Quand vous devinez ce que la personne voulait dire, proposez la correction.
À vérifier à la main : dites ce qui serait valide : « format jj/mm/aaaa, par exemple 24/06/2026 ».
Les envois à portée juridique ou financière et ceux qui modifient des données doivent être réversibles, vérifiés ou confirmés.
À vérifier à la main : ajoutez une étape de vérification, une fenêtre d'annulation ou une confirmation explicite. l'une des trois suffit.
Ne faites pas saisir deux fois la même information dans un même parcours.
À vérifier à la main : pré-remplissez, proposez une case à cocher de recopie, ou laissez choisir une valeur déjà saisie.
N'obligez pas à résoudre une énigme ni à se souvenir de quelque chose pour se connecter.
À vérifier à la main : autorisez le collage et laissez les gestionnaires de mots de passe remplir le champ.
Les messages qui apparaissent sans déplacer le focus doivent être annoncés.
À vérifier à la main : utilisez `role="status"` (poli) ou `role="alert"` (assertif) pour ce qui est urgent.
Le texte des critères provient des Web Content Accessibility Guidelines 2.2 du W3C. Le niveau AAA est exclu : ce n'est pas ce que demande l'EAA, et le W3C ne le recommande pas comme objectif pour tout un site. Les 31 critères AAA ont leurs propres pages dans la référence complète.