WCAG 2.2 : comment évaluer chaque exigence

Le contenu non textuel qui transmet quelque chose a un équivalent textuel

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Parcourez toute la page à la recherche de contenu non textuel : photos, icônes, logos, graphiques, cartes, schémas, images d’affiche de vidéo, et images contenues dans les boutons et les liens.
2. Pour chacun, sélectionnez-le dans le panneau Éléments des outils de développement et lisez le nom dans son panneau Accessibilité.
3. Notez chacun de ceux qui n’ont pas de nom et ne sont pas masqués aux technologies d’assistance (avec alt="", aria-hidden="true", role="presentation" ou en tant qu’arrière-plan CSS).
4. Cherchez aussi l’information que seule la CSS affiche : images d’arrière-plan, polices d’icônes et images ajoutées avec la propriété content. Inspectez chacune, puisqu’il n’y a pas d’attribut alt à lire, et vérifiez que ce qu’elle montre est aussi donné dans un texte que lit le lecteur d’écran.
5. Pour un contenu qui ne peut pas être décrit en quelques mots, comme un graphique ou une carte, vérifiez que le nom indique au moins ce dont il s’agit, et qu’une description plus complète figure dans la page ou est liée à côté.

Conforme si

Chaque contenu non textuel dont une personne a besoin a un équivalent textuel, ou est masqué aux technologies d’assistance parce qu’il est décoratif.

Non conforme si

Un contenu non textuel qui transmet quelque chose n’a pas d’équivalent textuel : l’utilisateur de lecteur d’écran rencontre une image sans nom ou rien du tout, ce qui ne respecte pas le critère WCAG 1.1.1.

Règles qui le testent : img-alt-present, role-img-text-alternative-present, canvas-text-alternative-present, embed-text-alternative-present, svg-text-alternative-present, svg-image-text-alternative-present, object-text-alternative-present, video-poster-text-alternative-present, meter-name-present, progressbar-name-present

Les images et les icônes utilisées comme contrôles sont nommées d’après leur fonction

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Repérez chaque lien, bouton et autre contrôle dont le seul contenu est une image ou une icône, comme un logo qui renvoie à l’accueil, une loupe pour la recherche ou une croix qui ferme une boîte de dialogue.
2. Pour chacun, sélectionnez-le dans le panneau Éléments des outils de développement et lisez le nom dans son panneau Accessibilité.
3. Vérifiez que le nom indique ce que fait le contrôle ou où il mène (« Rechercher », « Fermer », « Accueil »), et non ce que montre l’image (« loupe ») ni un nom de fichier.

Conforme si

Chaque contrôle constitué d’une image ou d’une icône a un nom qui indique ce qu’il fait ou où il mène.

Non conforme si

Un contrôle constitué d’une image ou d’une icône n’a pas de nom, ou a un nom qui décrit l’image plutôt que ce qu’il fait, ce qui ne respecte pas le critère WCAG 1.1.1.

Règles qui le testent : input-image-alt-present, area-alt-present

Les images décoratives, et seulement elles, sont masquées aux technologies d’assistance

• Seule une personne peut le vérifier
• Outils : Les outils de développement du navigateur

1. Parcourez la page à la recherche des images, icônes et graphismes purement décoratifs : bordures, séparateurs, images d’arrière-plan, ornements, et images dont le texte voisin donne déjà le contenu.
2. Pour chacun, sélectionnez-le dans le panneau Éléments des outils de développement et vérifiez dans son panneau Accessibilité qu’il est ignoré (alt="", aria-hidden="true", role="presentation" ou arrière-plan CSS).
3. Pour un SVG décoratif dessiné dans la page, vérifiez qu’il a aria-hidden="true". Sans cela, certains couples navigateur et lecteur d’écran l’annoncent comme une image sans nom, ou lisent le texte qu’il contient.
4. Faites ensuite l’inverse : pour chaque image masquée de cette façon, demandez-vous si un utilisateur perdrait quelque chose si elle disparaissait : une information, une étiquette, les données d’un graphique.

Conforme si

Les images décoratives sont masquées aux technologies d’assistance, et chaque image masquée est réellement décorative.

Non conforme si

Une image décorative est annoncée (souvent par son nom de fichier), ou une image qui transmet de l’information est masquée aux technologies d’assistance, ce qui ne respecte pas le critère WCAG 1.1.1.

Chaque équivalent textuel donne ce que donne son image

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Pour chaque image et autre contenu non textuel doté d’un équivalent textuel, lisez l’équivalent (le nom dans le panneau Accessibilité des outils de développement) et regardez le contenu à sa place dans la page.
2. Demandez-vous ce que le contenu apporte au lecteur à cet endroit, et vérifiez que l’équivalent apporte la même chose : les mots d’une image texte, le propos d’une photo, les faits que montre un graphique.
3. Quand l’équivalent ne fait que nommer une image complexe, comme un graphique ou un schéma, vérifiez que le détail figure dans une légende, un texte ou un tableau à côté, ou dans un lien voisin, qu’un utilisateur de lecteur d’écran peut trouver à partir de l’image.
4. Notez les équivalents qui sont un nom de fichier, une adresse web, un mot comme « image » ou « photo », ou qui répètent le texte situé juste à côté.
5. Vérifiez la langue de chaque équivalent : il devrait être dans la langue de la page, ou porter l’indication de sa propre langue.

Conforme si

Chaque équivalent textuel donne ce que son contenu donne à cet endroit, directement ou par une description qu’un utilisateur de lecteur d’écran peut atteindre à partir de lui.

Non conforme si

Un équivalent textuel ne donne pas ce que donne le contenu, par exemple un nom de fichier, un mot générique ou un graphique nommé sans que ses données figurent nulle part, ce qui ne respecte pas le critère WCAG 1.1.1 (F30).

Règles qui le testent : area-alt-quality, canvas-text-alternative-quality, embed-text-alternative-quality, img-alt-decorative, img-alt-quality, input-image-alt-decorative, input-image-alt-quality, object-text-alternative-quality, svg-text-alternative-quality

Un CAPTCHA indique à quoi il sert et propose une autre forme qui fait appel à un autre sens

• Seule une personne peut le vérifier
• Outils : Un lecteur d’écran

1. Repérez tout test qu’utilise la page pour distinguer les personnes des programmes, comme des lettres déformées à saisir, des images à choisir ou un puzzle à faire glisser.
2. Vérifiez qu’il a un équivalent textuel qui indique ce dont il s’agit et ce qu’il faut faire, sans donner la réponse.
3. Vérifiez qu’il propose une autre forme qui fait appel à un autre sens, comme une version audio d’un test visuel, ou un tout autre moyen, comme un code envoyé par courriel.
4. Essayez l’autre forme avec un lecteur d’écran et au clavier.

Conforme si

La page n’a pas de test de ce type, ou le test indique ce dont il s’agit et propose une forme qui fait appel à un autre sens et peut être réussie.

Non conforme si

Le test ne peut être réussi qu’en voyant (ou seulement en entendant), ou aucun texte n’indique ce dont il s’agit, ce qui ne respecte pas le critère WCAG 1.1.1.

Les médias pré-enregistrés seulement audio et seulement vidéo ont une transcription ou une version de remplacement équivalente

• Les règles en décident en partie
• Outils : un navigateur seulement

1. Repérez chaque lecteur audio et chaque vidéo sans son de la page, y compris dans les cadres, et lancez la lecture de chacun.
2. Pour l’audio, cherchez à côté du lecteur et ailleurs dans la page une transcription ou un lien vers une transcription.
3. Pour une vidéo sans son, cherchez une transcription, ou une version audio qui décrit tout ce qui est montré, que vous pouvez trouver et lancer depuis la page au clavier.
4. Comparez chaque version de remplacement avec le média et vérifiez qu’elle donne la même information : paroles, sons importants et ce qui est montré.
5. Laissez de côté un média qui est lui-même une version de remplacement d’un texte de la page et qui est signalé comme tel.

Conforme si

Chaque contenu pré-enregistré seulement audio ou seulement vidéo a une transcription, ou pour la vidéo une version audio, qui donne ce qu’il donne, ou est une version de remplacement signalée d’un texte de la page.

Non conforme si

Un média pré-enregistré seulement audio n’a pas de transcription, ou un média pré-enregistré seulement vidéo n’a ni transcription ni version audio donnant la même information, ce qui ne respecte pas le critère WCAG 1.2.1.

Règles qui le testent : media-alternative-transcript-evidence

Les vidéos pré-enregistrées avec son ont des sous-titres

• Seule une personne peut le vérifier
• Outils : un navigateur seulement

1. Repérez chaque vidéo pré-enregistrée avec son dans la page, y compris dans les cadres et les lecteurs d’autres sites.
2. Lancez chacune avec le son et notez si son son transmet de l’information : des paroles ou des sons importants.
3. Si c’est le cas, cherchez des sous-titres : le bouton CC du lecteur, des sous-titres incrustés dans l’image, ou une version sous-titrée de la même vidéo liée à côté. Une transcription seule ne remplace pas les sous-titres.
4. Laissez de côté une vidéo qui est elle-même une version de remplacement d’un texte de la page et qui est signalée comme telle.

Conforme si

Chaque vidéo pré-enregistrée dont le son transmet de l’information a des sous-titres, ici ou dans une version sous-titrée liée à côté, ou est une version de remplacement signalée d’un texte de la page.

Non conforme si

Une vidéo pré-enregistrée comporte des dialogues ou des sons importants et n’a pas de sous-titres, ni ici ni dans une version sous-titrée liée, même si une transcription est proposée, ce qui ne respecte pas le critère WCAG 1.2.2.

Règles qui le testent : video-caption

Les sous-titres donnent tous les dialogues, qui parle et les sons importants, synchronisés avec la vidéo

• Seule une personne peut le vérifier
• Outils : un navigateur seulement

1. Lancez chaque vidéo sous-titrée avec le son et les sous-titres activés.
2. Comparez les sous-titres avec ce qui est dit et entendu, du début à la fin.
3. Vérifiez qu’ils transcrivent tous les dialogues, indiquent qui parle quand ce n’est pas évident, décrivent les sons importants (musique, alarmes, rires), et restent synchronisés avec l’image.
4. Traitez les sous-titres générés automatiquement avec prudence : ils se trompent souvent sur les noms, les nombres et la ponctuation et ne décrivent pas les sons, si bien qu’ils satisfont rarement ce critère sans être corrigés.

Conforme si

Les sous-titres transcrivent tous les dialogues, les locuteurs quand c’est nécessaire et les sons importants, de façon synchronisée avec la vidéo.

Non conforme si

Les sous-titres omettent des dialogues ou des sons importants, n’indiquent pas qui parle quand cela compte, ou se désynchronisent de la vidéo, ce qui ne respecte pas le critère WCAG 1.2.2 (F8).

Les vidéos pré-enregistrées avec son ont une audio-description ou une version de remplacement textuelle complète

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les vidéos en direct avec son ont des sous-titres

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les vidéos pré-enregistrées avec son ont une audio-description

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Le texte qui a l’apparence d’un titre est balisé comme titre, à un niveau qui correspond au plan de la page

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur, Un lecteur d’écran

1. Parcourez la page et notez chaque texte qui sert de titre : il est plus grand ou plus gras que le texte qui l’entoure et introduit ce qui suit.
2. Pour chacun, vérifiez dans le panneau Éléments des outils de développement qu’il s’agit d’un <h1> à <h6>, ou qu’il a role="heading" avec un aria-level.
3. Vérifiez l’inverse : chaque élément de titre de la page introduit un contenu, au lieu de servir seulement à agrandir du texte.
4. Listez les titres avec la liste des titres d’un lecteur d’écran, une extension de navigateur comme HeadingsMap ou le panneau Accessibilité, et vérifiez que leurs niveaux correspondent à la structure que montre la page : les sous-titres d’une section se trouvent sous son titre, et non au même niveau ou au-dessus. Un niveau sauté à lui seul, comme un h2 suivi d’un h4, ne fait pas échouer ce critère quand l’imbrication reste correcte. Notez-le comme un problème de bonne pratique.

Conforme si

Chaque titre visuel est balisé comme titre, chaque élément de titre en est vraiment un, et les niveaux suivent le plan que montre la page.

Non conforme si

Un texte qui a l’apparence d’un titre est du texte simple, un élément de titre n’est utilisé que pour sa taille, ou les niveaux contredisent le plan : les utilisateurs de lecteur d’écran ne peuvent pas trouver ni suivre les sections, ce qui ne respecte pas le critère WCAG 1.3.1.

Règles qui le testent : p-as-heading

Le contenu présenté comme une liste est balisé comme une liste

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Parcourez la page à la recherche de contenu présenté comme une liste : des éléments en ligne ou en colonne avec des puces, des numéros ou la même présentation, comme des menus, des étapes et des groupes de liens.
2. Pour chacun, vérifiez dans le panneau Éléments des outils de développement qu’il s’agit d’un <ul>, <ol> ou <dl> (ou qu’il a role="list" avec des éléments role="listitem").
3. Vérifiez que chaque liste ne contient directement que des éléments de liste, et que chaque élément de liste se trouve dans une liste.
4. Si vous testez avec VoiceOver et Safari, sachez que Safari n’expose pas une liste dont les puces sont supprimées avec list-style: none, sauf si elle a role="list". C’est un choix du navigateur et non un défaut de la page, mais notez-le quand la structure de la liste compte pour l’utilisateur.

Conforme si

Le contenu présenté comme une liste est balisé comme une liste, et le balisage des listes est complet.

Non conforme si

Un contenu présenté comme une liste est une suite de paragraphes, de sauts de ligne ou de div, ou le balisage de liste est incorrect : le lecteur d’écran n’indique pas qu’il s’agit d’une liste ni combien d’éléments elle compte, ce qui ne respecte pas le critère WCAG 1.3.1.

Règles qui le testent : list-children-valid, listitem-parent-valid, definition-list-children-valid, dlitem-parent-valid

Les tableaux de données balisent leurs en-têtes et leur légende, et les tableaux de mise en page n’ont aucun balisage d’en-tête

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur, Un lecteur d’écran

1. Repérez chaque tableau de la page, et chaque grille de données dessinée sans tableau.
2. Pour un tableau de données, vérifiez dans le panneau Éléments des outils de développement que ses cellules d’en-tête sont des <th> (avec scope quand un en-tête n’est pas clairement un en-tête de ligne ou de colonne) et qu’un titre affiché au-dessus est son <caption>.
3. Pour un tableau complexe, avec des en-têtes sur plus d’un niveau, vérifiez que chaque cellule de données désigne ses en-têtes avec un attribut headers ou avec scope.
4. Avec un lecteur d’écran, parcourez quelques cellules de données et vérifiez qu’il lit leurs en-têtes avec elles.
5. Pour un tableau qui ne sert qu’à la mise en page, vérifiez qu’il n’a ni <th>, ni <caption>, ni summary.

Conforme si

Les données sont dans des tableaux dont les en-têtes et la légende sont balisés, le lecteur d’écran lit les en-têtes de chaque cellule, et les tableaux de mise en page n’ont aucun balisage d’en-tête.

Non conforme si

Un tableau de données n’a pas de balisage d’en-tête ou a une fausse légende dans une cellule, des données sont présentées en grille sans tableau, ou un tableau de mise en page est balisé comme un tableau de données, ce qui ne respecte pas le critère WCAG 1.3.1.

Règles qui le testent : table-headers-attr-valid, table-th-has-data-cells, table-fake-caption, td-has-header

Les champs de formulaire sont liés à leur étiquette visible, et les groupes de champs au texte qui nomme le groupe

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur, Un lecteur d’écran

1. Repérez chaque champ de formulaire de la page : champs de texte, cases à cocher, boutons radio, listes déroulantes et contrôles personnalisés.
2. Pour chacun, sélectionnez-le dans le panneau Éléments des outils de développement et vérifiez que le nom affiché dans son panneau Accessibilité contient son étiquette visible.
3. Pour un groupe de champs qui répond à une seule question, comme des boutons radio ou une date en trois parties, vérifiez que le groupe est un <fieldset> avec une <legend>, ou qu’il a role="group" avec un nom, afin que la question soit lue avec chaque champ.
4. Vérifiez que les instructions affichées à côté d’un champ (un format, une marque de champ obligatoire) lui sont liées avec aria-describedby ou figurent dans son étiquette.

Conforme si

Le nom de chaque champ contient son étiquette visible, les groupes de champs sont nommés par leur question, et les instructions d’un champ lui sont liées.

Non conforme si

Un champ n’est étiqueté que par un texte voisin qui ne lui est pas lié, ou la question d’un groupe n’est pas liée à ses champs : le lecteur d’écran lit un champ sans dire à quoi il sert, ce qui ne respecte pas le critère WCAG 1.3.1.

Règles qui le testent : form-control-programmatic-label-present

Les rôles et les relations ARIA donnent la même structure que celle que montre la page

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Repérez les parties de la page construites avec des rôles ARIA : menus personnalisés, onglets, arborescences, grilles, listes et zones de liste.
2. Pour chacune, ouvrez l’arbre d’accessibilité des outils de développement et vérifiez que la structure qu’il montre correspond à ce qui est à l’écran : une liste d’onglets qui contient des onglets, un menu qui contient des éléments de menu, une grille qui contient des lignes et des cellules.
3. Vérifiez qu’aucun élément doté d’un rôle n’est privé du parent ou des enfants que son rôle exige, et qu’aria-owns, quand il est utilisé, donne à chaque élément un seul propriétaire.
4. Vérifiez que <body> n’est pas masqué avec aria-hidden="true".

Conforme si

L’arbre d’accessibilité donne la structure que montre la page, chaque rôle étant à la place que son rôle exige.

Non conforme si

Un rôle n’a pas le parent ou les enfants requis, est possédé deux fois, ou la page est masquée dans l’arbre : les technologies d’assistance donnent une structure qui ne correspond pas à l’écran, ce qui ne respecte pas le critère WCAG 1.3.1.

Règles qui le testent : aria-hidden-body, aria-required-children, aria-prohibited-children, aria-required-parent, aria-roles-valid, aria-owns-valid

Le sens donné par la mise en forme ou la disposition, comme le gras, la couleur, la position ou un astérisque, est aussi donné dans le balisage ou le texte

• Seule une personne peut le vérifier
• Outils : Les outils de développement du navigateur, Un lecteur d’écran

1. Cherchez le sens que la page ne montre que par l’apparence : champs obligatoires signalés par un astérisque ou une couleur, mots mis en valeur ou barrés, élément sélectionné indiqué par son style, texte isolé dans un encadré.
2. Pour chacun, vérifiez si le même sens figure dans le balisage (comme required, aria-current, <em>, <del>) ou dans le texte lui-même (« obligatoire », « page actuelle »).
3. Examinez les textes et les icônes ajoutés en CSS avec la propriété content. Selon le navigateur, les lecteurs d’écran les lisent ou non : une information que seule la CSS ajoute doit donc aussi figurer dans le balisage ou le texte.
4. Lisez ces parties avec un lecteur d’écran et vérifiez que ce que montre la mise en forme est dit.

Conforme si

Tout ce que transmet la mise en forme ou la disposition figure aussi dans le balisage ou le texte.

Non conforme si

Un sens n’est donné que par la mise en forme ou la position, comme des champs obligatoires signalés seulement par la couleur ou par un astérisque non expliqué : l’utilisateur de lecteur d’écran le manque, ce qui ne respecte pas le critère WCAG 1.3.1.

L’ordre dans lequel les technologies d’assistance lisent le contenu en préserve le sens, et les espaces ne servent pas à mettre le texte en forme

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les instructions ne reposent pas uniquement sur la forme, la couleur, la taille, la position, l’orientation ou le son

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

La page fonctionne en portrait et en paysage, sauf si une orientation est essentielle

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Ouvrez la page dans la barre d’outils de l’appareil des outils de développement, ou sur un téléphone ou une tablette.
2. Affichez-la en portrait, puis faites-la pivoter en paysage (ou l’inverse), et utilisez son contenu principal et ses contrôles dans chaque orientation.
3. Confirmez le résultat sur un vrai téléphone ou une vraie tablette, avec le verrouillage de la rotation désactivé. La barre d’outils de l’appareil ne peut pas montrer si la page verrouille l’orientation par script ou, pour une application web installée, par son manifeste.
4. Vérifiez que la page ne vous demande pas de faire pivoter l’appareil, ne tourne pas son contenu de côté et ne masque pas de contenu dans une orientation.
5. Si c’est le cas, demandez-vous si cette orientation est essentielle, comme pour un chèque bancaire ou un clavier de piano.

Conforme si

La page s’affiche et fonctionne dans les deux orientations, ou une orientation lui est essentielle.

Non conforme si

La page ne fonctionne que dans une orientation, en demandant de faire pivoter l’appareil, en tournant son contenu ou en le masquant, sans raison essentielle, ce qui ne respecte pas le critère WCAG 1.3.4.

Règles qui le testent : css-orientation-lock

Les champs qui demandent des informations sur l’utilisateur indiquent leur finalité avec la bonne valeur d’autocomplete

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Repérez chaque champ qui demande des informations sur la personne qui utilise la page : nom, courriel, téléphone, adresse, date de naissance, identifiant, mot de passe, données de carte bancaire.
2. Pour chacun, lisez son attribut autocomplete dans le panneau Éléments des outils de développement.
3. Vérifiez que c’est la valeur qui correspond à ce que demande le champ (name, email, tel, street-address, postal-code, bday, username, new-password, cc-number, etc.).
4. Un champ avec autocomplete="off", ou sans attribut autocomplete, n’identifie pas sa finalité, même si le navigateur propose quand même de le remplir.
5. Laissez de côté les champs qui portent sur une autre personne, comme le destinataire d’un cadeau, sauf s’ils l’indiquent avec la section ou la valeur appropriée.
6. Seules les finalités de la liste des finalités de saisie des WCAG sont concernées. Un champ de numéro d’adhérent ou de client, par exemple, n’a aucune valeur dans cette liste et n’en a pas besoin.

Conforme si

Chaque champ qui demande des informations sur l’utilisateur lui-même a la valeur d’autocomplete qui lui correspond.

Non conforme si

Un champ qui demande des informations sur l’utilisateur lui-même n’a pas de valeur d’autocomplete, ou une valeur erronée : le navigateur et les outils d’assistance ne peuvent pas le remplir ni signaler sa finalité, ce qui ne respecte pas le critère WCAG 1.3.5.

Règles qui le testent : autocomplete-valid

La couleur n’est pas le seul moyen de transmettre une information, de demander une action ou de distinguer un élément

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Cherchez l’information que la page donne par la couleur : liens dans un paragraphe, champs obligatoires ou non valides, onglet ou jour sélectionné, séries d’un graphique, état en rouge ou en vert.
2. Pour chacune, vérifiez si autre chose que la couleur la donne aussi : un soulignement, une icône, une étiquette textuelle, un motif, une bordure ou un changement de forme.
3. Pour les liens d’un paragraphe qui ne se distinguent que par la couleur, vérifiez qu’ils reçoivent un soulignement ou une autre marque au survol et au focus, et que leur couleur a un contraste d’au moins 3:1 avec le texte qui les entoure.
4. Affichez la page en niveaux de gris (dans le panneau Rendu des outils de développement, émulez l’achromatopsie) et vérifiez que rien n’est perdu.

Conforme si

Tout ce que la page donne par la couleur est aussi donné d’une autre façon.

Non conforme si

Une information, comme les champs en erreur ou le texte qui est un lien, n’est donnée que par la couleur, ce qui ne respecte pas le critère WCAG 1.4.1.

Règles qui le testent : link-in-text-block

Un son qui se déclenche tout seul pendant plus de 3 secondes peut être mis en pause, arrêté ou baissé

• Seule une personne peut le vérifier
• Outils : Un clavier

1. Chargez la page avec le son activé et écoutez si un son démarre tout seul : musique, vidéo, publicité.
2. Quand un son dure plus de 3 secondes, cherchez près du haut de la page ou du lecteur un moyen de le mettre en pause ou de l’arrêter, ou d’en baisser le volume indépendamment du volume de l’ordinateur.
3. Vérifiez que ce contrôle peut être trouvé et utilisé au clavier.

Conforme si

Aucun son ne se déclenche tout seul pendant plus de 3 secondes, ou un contrôle situé près du début de la page permet de le mettre en pause, de l’arrêter ou de le baisser.

Non conforme si

Un son se déclenche tout seul pendant plus de 3 secondes sans moyen de le mettre en pause, de l’arrêter ou de le baisser autrement qu’avec le volume de l’ordinateur : il couvre le lecteur d’écran, ce qui ne respecte pas le critère WCAG 1.4.2.

Règles qui le testent : no-autoplay-audio

Le texte a un contraste d’au moins 4,5:1 avec son arrière-plan, ou 3:1 s’il est de grande taille

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Parcourez la page à la recherche de texte qui semble peu visible sur son arrière-plan : texte gris clair, texte sur des panneaux colorés, textes indicatifs, texte sur des images ou des dégradés, texte des boutons.
2. Pour chacun, inspectez-le et cliquez sur l’échantillon de sa couleur dans le panneau Styles des outils de développement : le sélecteur de couleur affiche son rapport de contraste avec l’arrière-plan.
3. Le sélecteur de couleur mesure par rapport à la couleur d’arrière-plan définie en CSS. Quand le texte se trouve sur une image, un dégradé ou un calque semi-transparent, ou que sa couleur vient de l’opacité ou d’un mode de fusion, la valeur du sélecteur n’est pas fiable : passez plutôt à l’étape suivante.
4. Quand l’arrière-plan est une image, un dégradé ou un calque semi-transparent, mesurez le texte par rapport à la partie de l’arrière-plan où il est le moins visible, avec un outil de vérification du contraste des couleurs.
5. Vérifiez que le rapport est d’au moins 4,5:1, ou 3:1 pour le texte de grande taille : au moins 24 pixels (18 pt), ou 18,66 pixels (14 pt) en gras.
6. N’arrondissez pas le résultat : 4,49:1 échoue. Vérifiez aussi le texte dans ses autres états, comme au survol, au focus et une fois sélectionné, car un état peut réduire le contraste.
7. Laissez de côté les logos et les noms de marque, le texte des contrôles désactivés, le texte purement décoratif ou que personne ne peut voir, et le texte qui fait partie d’une image contenant d’autres éléments visuels importants, comme un panneau de signalisation sur une photo.

Conforme si

Tout le texte et tout le texte sous forme d’image ont un contraste d’au moins 4,5:1 avec leur arrière-plan, ou 3:1 pour le texte de grande taille.

Non conforme si

Le texte a un contraste avec son arrière-plan inférieur à 4,5:1 (3:1 pour le texte de grande taille) : les personnes malvoyantes ne peuvent pas le lire, ce qui ne respecte pas le critère WCAG 1.4.3.

Règles qui le testent : contrast-minimum, contrast-computable

Le texte peut être agrandi jusqu’à 200 % sans perte de contenu ou de fonctionnalité

• Les règles en décident en partie
• Outils : Le zoom du navigateur

1. Zoomez le navigateur à 200 %.
2. Parcourez toute la page et vérifiez que tout le texte a grandi, et qu’aucun texte n’est tronqué, superposé ou masqué.
3. Utilisez les contrôles, les menus et les formulaires de la page à cette taille et vérifiez qu’ils fonctionnent tous encore.
4. Sur un téléphone, vérifiez que vous pouvez zoomer la page à 200 % en pinçant. Utilisez Chrome sur Android, en laissant désactivé son réglage d’accessibilité qui force le zoom : Safari sur iOS ignore une zone d’affichage qui bloque le zoom, et peut donc masquer ce défaut.
5. Laissez de côté les sous-titres et le texte sous forme d’image.

Conforme si

À 200 %, tout le texte a grandi et reste lisible, et tout fonctionne encore.

Non conforme si

À 200 %, du texte est tronqué, se superpose ou ne grandit pas, un contrôle cesse de fonctionner, ou le zoom par pincement est bloqué, ce qui ne respecte pas le critère WCAG 1.4.4.

Règles qui le testent : meta-viewport-zoom-enabled

Le texte est présenté sous forme de texte et non dans une image, sauf si son apparence est essentielle, comme dans un logo

• Seule une personne peut le vérifier
• Outils : Les outils de développement du navigateur

1. Cherchez les images qui contiennent des mots : bannières, titres, boutons, citations, menus.
2. Essayez d’en sélectionner un mot avec le pointeur, ou inspectez-la : un texte qui ne peut pas être sélectionné se trouve généralement dans une image, un dessin SVG ou un canvas.
3. Pour chacune, demandez-vous si le même rendu pourrait être obtenu avec du vrai texte mis en forme en CSS.
4. Laissez de côté les logos et les noms de marque, les images où l’apparence particulière du texte est essentielle, comme un spécimen de police, et le texte sous forme d’image que l’utilisateur peut adapter à ses besoins, comme une page qui lui permet de choisir la police, la taille et les couleurs du texte de l’image.

Conforme si

Le texte est du vrai texte, ou une image texte est un logo ou nécessite son apparence exacte.

Non conforme si

Des mots sont présentés sous forme d’image alors qu’un texte mis en forme aurait la même apparence : les personnes ne peuvent pas en changer la taille, la couleur ni l’espacement, ce qui ne respecte pas le critère WCAG 1.4.5.

Règles qui le testent : image-of-text

À 320 pixels CSS de large, le contenu ne nécessite pas de défilement dans deux directions et rien n’est perdu

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les parties d’un contrôle qui montrent sa présence et son état ont un contraste d’au moins 3:1

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les parties d’un graphique nécessaires pour le comprendre ont un contraste d’au moins 3:1

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Un espacement imposé dans un attribut style n’empêche pas le texte de prendre l’espacement de l’utilisateur

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Dans le panneau Éléments des outils de développement, cherchez !important dans le code de la page (Ctrl+F, ou Cmd+F sur Mac), et notez chaque occurrence dans un attribut style qui définit line-height, letter-spacing ou word-spacing.
2. Pour chacune, lisez la valeur obtenue dans l’onglet Calculé et comparez-la avec 1,5 fois la taille de police pour line-height, 0,12 fois pour letter-spacing et 0,16 fois pour word-spacing.
3. Quand la valeur est inférieure, réduisez la fenêtre à 320 pixels CSS de large et vérifiez si ce texte passe sur plus d’une ligne.
4. Dans le panneau Styles des outils de développement, ajoutez une nouvelle règle de style pour * qui définit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, et une règle pour p qui définit margin-bottom: 2em !important. L’élément garde sa propre valeur, car son attribut style l’emporte.
5. Vérifiez si ce texte est tronqué, recouvre un autre texte ou est masqué.

Conforme si

Aucun attribut style n’impose un espacement inférieur à ces valeurs sur un texte qui passe à la ligne, ou le texte concerné s’affiche toujours en entier avec l’espacement appliqué.

Non conforme si

Un attribut style impose un espacement inférieur à ces valeurs sur un texte qui passe à la ligne, si bien qu’un bookmarklet ou une extension de navigateur ne peut pas appliquer l’espacement de la personne, et avec cet espacement le texte se superpose ou est tronqué, ce qui ne respecte pas le critère WCAG 1.4.12.

Règles qui le testent : avoid-inline-spacing

Avec l’espacement du critère 1.4.12 appliqué, aucun texte n’est tronqué ni superposé (mesuré dans un navigateur)

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur, Un clavier

1. Dans le panneau Styles des outils de développement, ajoutez une nouvelle règle de style pour * qui définit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, et une règle pour p qui définit margin-bottom: 2em !important. Les règles ajoutées dans le panneau Styles ne sont pas bloquées par la politique de sécurité de la page.
2. Faites défiler toute la page et cherchez du texte tronqué, qui recouvre un autre texte ou qui disparaît. Le texte qui fait partie d’une image ne compte pas.
3. Faites-le aux largeurs que vous testez par ailleurs, y compris à 320 pixels CSS de large, où le texte passe le plus à la ligne et est le plus souvent tronqué.
4. Quand du texte est tronqué, vérifiez si la page propose un moyen de l’afficher en entier, comme un lien « Lire la suite » ou un bouton qui agrandit le bloc. Cela ne compte que si vous pouvez l’utiliser au clavier et qu’il affiche tout le texte avec l’espacement toujours appliqué.

Conforme si

Tout le texte reste visible et lisible, ou tout texte tronqué peut être affiché en entier au clavier.

Non conforme si

Du texte est tronqué, se superpose ou est perdu avec l’espacement appliqué et ne peut pas être affiché en entier d’une autre façon, ce qui ne respecte pas le critère WCAG 1.4.12.

Règles qui le testent : text-spacing-content-loss

Avec l’espacement du critère 1.4.12 appliqué, les contrôles, les menus et les formulaires fonctionnent encore et affichent tout leur texte

• Seule une personne peut le vérifier
• Outils : Les outils de développement du navigateur, Un clavier, Une souris ou un autre dispositif de pointage

1. Dans le panneau Styles des outils de développement, ajoutez une nouvelle règle de style pour * qui définit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, et une règle pour p qui définit margin-bottom: 2em !important.
2. Utilisez chaque contrôle de la page : ouvrez ses menus et ses listes déroulantes, remplissez et soumettez ses formulaires, changez d’onglet, et ouvrez et fermez ses boîtes de dialogue.
3. Vérifiez que chacun réagit toujours, qu’aucun texte déplacé ne recouvre un contrôle, et que chaque étiquette et chaque bouton affiche tout son texte.

Conforme si

Chaque contrôle fonctionne encore et affiche tout son texte avec l’espacement appliqué.

Non conforme si

Avec l’espacement appliqué, un contrôle cesse de fonctionner, est recouvert au point de ne plus pouvoir être utilisé, ou perd le texte qui indique ce qu’il fait, ce qui ne respecte pas le critère WCAG 1.4.12.

Avec l’espacement du critère 1.4.12 appliqué, le contenu affiché seulement après une interaction (menus, boîtes de dialogue, onglets, messages) garde tout son texte

• Seule une personne peut le vérifier
• Outils : Les outils de développement du navigateur, Un clavier, Une souris ou un autre dispositif de pointage

1. Dans le panneau Styles des outils de développement, ajoutez une nouvelle règle de style pour * qui définit line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important, et une règle pour p qui définit margin-bottom: 2em !important.
2. Faites apparaître le contenu que la page n’affiche qu’après une action : ouvrez chaque menu et chaque boîte de dialogue, passez à chaque onglet, développez chaque section réduite, affichez chaque info-bulle, et soumettez un formulaire comportant une erreur pour voir ses messages d’erreur.
3. Cherchez dans chacun du texte tronqué, qui recouvre un autre texte ou qui disparaît, comme sur la page elle-même.
4. Quand du texte est tronqué, vérifiez si la page propose un moyen de l’afficher en entier, comme un lien « Lire la suite » ou un bouton qui agrandit le bloc. Cela ne compte que si vous pouvez l’utiliser au clavier et qu’il affiche tout le texte avec l’espacement toujours appliqué.

Conforme si

Le contenu affiché après une action garde tout son texte visible et lisible avec l’espacement appliqué, ou le texte tronqué peut être affiché en entier au clavier.

Non conforme si

Le texte d’un menu, d’une boîte de dialogue, d’un onglet, d’une info-bulle ou d’un message est tronqué ou se superpose avec l’espacement appliqué et ne peut pas être affiché en entier d’une autre façon, ce qui ne respecte pas le critère WCAG 1.4.12.

Le contenu additionnel qui apparaît au survol ou au focus peut être masqué sans déplacer le pointeur ni le focus

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Le pointeur peut se déplacer sur le contenu additionnel qui apparaît au survol sans que celui-ci disparaisse

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Le contenu additionnel qui apparaît au survol ou au focus reste visible jusqu’à ce qu’il soit masqué, que le pointeur ou le focus s’en aille, ou qu’il ne soit plus pertinent

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Toutes les fonctionnalités peuvent être utilisées au clavier seul

• Seule une personne peut le vérifier
• Outils : Un clavier

1. Désactivez tout lecteur d’écran. En mode navigation, un lecteur d’écran peut activer des éléments que le clavier seul ne peut pas atteindre, ce qui masque les défauts.
2. Rechargez la page et, sans cliquer, appuyez plusieurs fois sur Tab pour parcourir toute la page. Notez chaque lien, bouton, champ et autre contrôle que vous traversez.
3. Comparez avec ce que vous pouvez cliquer ou faire glisser avec le pointeur, et notez tout ce que le clavier n’atteint jamais : un contrôle, un élément de menu, une zone défilante, une partie d’une carte ou un widget personnalisé.
4. Utilisez chaque contrôle au clavier : Entrée ou Espace pour l’activer, les touches fléchées dans les menus, les onglets, les listes et les curseurs, Échap pour fermer ce qui s’ouvre.
5. Pour les widgets personnalisés, comparez les touches avec celles que les WAI-ARIA Authoring Practices prévoient pour ce type de widget, comme les touches fléchées dans une liste d’onglets. Un widget qui ne fonctionne qu’avec des touches inhabituelles peut tout de même satisfaire ce critère si la page les explique, mais notez-le comme un problème d’utilisabilité.
6. Quand quelque chose ne peut pas être atteint ou utilisé au clavier, vérifiez si la page propose un autre moyen de faire la même chose au clavier seul, comme des boutons précédent et suivant pour un carrousel. Cela ne compte que s’il permet tout ce que permet le pointeur.
7. Laissez de côté ce qui dépend du tracé du pointeur, comme le dessin à main levée.

Conforme si

Tout ce que la page permet de faire avec un pointeur peut être fait au clavier seul, directement ou par un autre moyen qui remplit la même fonction.

Non conforme si

Une action ne peut être faite qu’avec un pointeur, sans moyen de faire la même chose au clavier, ce qui ne respecte pas le critère WCAG 2.1.1.

Règles qui le testent : iframe-focusable-content, server-side-image-map-absent, scrollable-region-focusable, mouse-only-event-handlers, click-handler-keyboard-operable, widget-keyboard-focusable, focus-not-removed-by-script

Le focus peut toujours être retiré de n’importe quelle partie de la page au clavier

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les raccourcis composés d’une seule lettre, d’un chiffre ou d’un symbole peuvent être désactivés ou reconfigurés, ou ne fonctionnent que lorsque leur contrôle a le focus

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Chaque limite de temps peut être désactivée, ajustée ou prolongée, sauf si elle est en temps réel, essentielle ou supérieure à 20 heures

• Les règles en décident en partie
• Outils : un navigateur seulement

1. Cherchez tout ce qui se produit dans la page au bout d’un temps donné : une session qui prend fin, un formulaire qui expire, une page qui s’actualise ou passe à la suite d’elle-même, un contenu qui disparaît.
2. Examinez le code source de la page et attendez un moment dessus pour trouver les limites non annoncées, comme un <meta http-equiv="refresh"> ou une déconnexion après une période d’inactivité.
3. Pour une session qui prend fin côté serveur, demandez sa durée à l’équipe plutôt que de la deviner, puis attendez l’avertissement à ce moment-là. Vérifiez l’avertissement avec un lecteur d’écran : il doit être annoncé, et pas seulement affiché.
4. Pour chaque limite, vérifiez qu’au moins une de ces conditions est remplie : vous pouvez la désactiver avant de l’atteindre ; vous pouvez l’ajuster à au moins dix fois sa durée ; ou vous êtes averti avant son expiration, disposez d’au moins 20 secondes pour la prolonger par une action simple comme appuyer sur une touche, et pouvez la prolonger au moins dix fois.
5. Laissez de côté les limites qui font partie d’un événement en temps réel, comme une vente aux enchères, qui sont essentielles, comme un examen chronométré, ou qui dépassent 20 heures.

Conforme si

Chaque limite de temps peut être désactivée, ajustée ou prolongée, ou est en temps réel, essentielle ou supérieure à 20 heures.

Non conforme si

Une limite de temps met fin à une session, un formulaire ou une page sans moyen de la désactiver, de l’ajuster ou de la prolonger, ce qui ne respecte pas le critère WCAG 2.2.1.

Règles qui le testent : meta-refresh-timing-absent

Les animations qui démarrent d’elles-mêmes et durent plus de cinq secondes peuvent être mises en pause, arrêtées ou masquées

• Seule une personne peut le vérifier
• Outils : Un clavier

1. Chargez la page et repérez tout ce qui bouge, clignote ou défile de lui-même : carrousels, texte défilant, animations, vidéos d’arrière-plan.
2. Pour chacun de ceux qui démarrent d’eux-mêmes, durent plus de 5 secondes et sont présentés en parallèle d’autres contenus, cherchez un contrôle pour le mettre en pause, l’arrêter ou le masquer.
3. Vérifiez que le contrôle peut être trouvé et utilisé au clavier, et qu’il arrête le mouvement au lieu de seulement le ralentir.
4. Laissez de côté un mouvement essentiel, comme un indicateur de progression pendant un chargement.

Conforme si

Tout ce qui bouge, clignote ou défile de soi-même pendant plus de 5 secondes à côté d’autres contenus peut être mis en pause, arrêté ou masqué.

Non conforme si

Un contenu bouge, clignote ou défile de lui-même pendant plus de 5 secondes à côté d’autres contenus sans moyen de le mettre en pause, de l’arrêter ou de le masquer, ce qui ne respecte pas le critère WCAG 2.2.2.

Règles qui le testent : moving-content-pausable, deprecated-elements-not-used

Le contenu qui se met à jour de lui-même peut être mis en pause, arrêté, masqué ou réglé pour se mettre à jour moins souvent

• Seule une personne peut le vérifier
• Outils : Un clavier

1. Repérez dans la page le contenu qui change de lui-même : bandeaux d’actualités, scores en direct, prix, fils d’actualité, minuteurs.
2. Pour chacun de ceux qui démarrent d’eux-mêmes et sont présentés en parallèle d’autres contenus, cherchez un contrôle pour le mettre en pause, l’arrêter, le masquer ou choisir la fréquence de ses mises à jour.
3. Vérifiez que le contrôle peut être trouvé et utilisé au clavier.
4. Laissez de côté les mises à jour essentielles à la finalité de la page.

Conforme si

Chaque partie qui se met à jour d’elle-même à côté d’autres contenus peut être mise en pause, arrêtée, masquée ou ralentie, ou ses mises à jour sont essentielles.

Non conforme si

Un contenu se met à jour de lui-même à côté d’autres contenus sans moyen de le mettre en pause, de l’arrêter, de le masquer ou d’en changer la fréquence, ce qui ne respecte pas le critère WCAG 2.2.2.

Rien ne flashe plus de trois fois dans une même seconde, ou les flashs sont assez petits et peu lumineux

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les blocs répétés sur plusieurs pages peuvent être contournés

• Les règles en décident en partie
• Outils : Un clavier, Un lecteur d’écran, Les outils de développement du navigateur

1. Fermez toute boîte de dialogue ou superposition, puis notez les blocs que la page reprend des autres pages du site : en-tête, navigation, recherche, barres latérales.
2. Rechargez la page et appuyez une fois sur Tab : vérifiez si un lien d’évitement apparaît et déplace le focus au-delà de ces blocs, vers le contenu principal, et suivez-le avec Entrée.
3. Vérifiez, dans le panneau Accessibilité des outils de développement ou dans les listes d’un lecteur d’écran, si le contenu principal est un repère main ou commence par un titre situé hors de la navigation.
4. Quand la page a un lien d’évitement, vérifiez que sa cible existe et que la touche Tab suivante, une fois le lien suivi, va dans le contenu principal.

Conforme si

La page ne répète aucun bloc, ou un lien d’évitement fonctionnel, un repère main ou des titres permettent aux utilisateurs du clavier et de lecteur d’écran de les sauter.

Non conforme si

Les blocs répétés ne peuvent pas être contournés : les utilisateurs du clavier et de lecteur d’écran doivent les traverser sur chaque page, ce qui ne respecte pas le critère WCAG 2.4.1.

Règles qui le testent : bypass-blocks-present

La page a un titre qui indique son sujet ou sa finalité et la distingue des autres pages du site

• Les règles en décident en partie
• Outils : un navigateur seulement

1. Lisez le titre de la page dans l’onglet du navigateur, ou dans <title> dans le panneau Éléments des outils de développement.
2. Vérifiez qu’il indique le sujet ou la finalité de cette page, comme le titre de l’article ou l’étape d’un processus (« Adresse de livraison - Commande - Boutique »).
3. Ouvrez deux ou trois autres pages du site et vérifiez que leurs titres permettent de distinguer les pages. Placer la partie propre à la page en premier, avant le nom du site, est une bonne pratique mais n’est pas exigé.
4. Quand la page change de contenu sans charger une nouvelle page, comme le fait une application monopage, vérifiez que le titre change avec lui.

Conforme si

Le titre de la page indique son sujet ou sa finalité et la distingue des autres pages.

Non conforme si

La page n’a pas de titre, ou a un titre générique, un nom de fichier ou le même titre que d’autres pages, ce qui ne respecte pas le critère WCAG 2.4.2.

Règles qui le testent : page-title-present, page-title-patterns

Le déplacement du focus avec Tab et Maj+Tab suit un ordre qui préserve le sens de la page et permet de l’utiliser

• Seule une personne peut le vérifier
• Outils : Un clavier

1. Rechargez la page et appuyez plusieurs fois sur Tab jusqu’à ce que le focus ait parcouru toute la page, en regardant où il va.
2. Comparez cet ordre avec celui dans lequel vous liriez et utiliseriez la page : par exemple les champs d’un formulaire dans l’ordre de leurs étiquettes, et les étapes d’une tâche dans leur suite logique.
3. Revenez en arrière dans la page avec Maj+Tab et vérifiez que le focus refait le même chemin en sens inverse.
4. Quand l’ordre diffère de l’ordre de lecture, vérifiez si cela change le sens d’un élément ou vous empêche de l’utiliser, comme atteindre le bouton « Envoyer » d’un formulaire avant ses champs.

Conforme si

Le focus parcourt la page dans un ordre qui en préserve le sens et permet d’en utiliser chaque partie, même s’il diffère légèrement de l’ordre visuel.

Non conforme si

Le focus saute d’un endroit à l’autre de la page au point d’en changer le sens ou l’utilisation, comme des champs remplis dans le désordre, ce qui ne respecte pas le critère WCAG 2.4.3.

Le focus entre dans une boîte de dialogue, un menu ou une section qui s’ouvre, reste dans une boîte de dialogue tant qu’elle recouvre la page, et revient à sa place à la fermeture

• Seule une personne peut le vérifier
• Outils : Un clavier

1. Au clavier, ouvrez chaque boîte de dialogue, menu, liste déroulante et section réduite de la page, en appuyant sur Entrée ou Espace sur le contrôle qui l’ouvre.
2. Appuyez une fois sur Tab et vérifiez que le focus entre dans ce qui s’est ouvert, ou s’y trouve déjà, plutôt que sur un élément situé derrière ou loin de lui.
3. Dans une boîte de dialogue qui recouvre la page, appuyez sur Tab jusqu’à avoir parcouru tous ses contrôles, et vérifiez que le focus reste dans la boîte de dialogue au lieu d’aller dans la page située derrière.
4. Fermez-la avec Échap ou son bouton de fermeture, et vérifiez que le focus revient au contrôle qui l’a ouverte, ou à l’endroit suivant le plus logique.

Conforme si

Le focus entre dans ce qui s’ouvre, reste dans une boîte de dialogue tant qu’elle recouvre la page, et revient là où il était à la fermeture.

Non conforme si

Le focus reste derrière ce qui s’ouvre, quitte une boîte de dialogue pour la page située derrière, ou arrive en haut de la page à la fermeture : l’ordre ne suit plus ce qui est à l’écran, ce qui ne respecte pas le critère WCAG 2.4.3.

Le focus ne s’arrête pas sur un contenu fermé, masqué ou hors de l’écran

• Seule une personne peut le vérifier
• Outils : Un clavier, Les outils de développement du navigateur

1. Fermez tout menu ou toute boîte de dialogue, rechargez la page, puis parcourez toute la page avec Tab en regardant où se trouve le focus.
2. Notez chaque fois que le focus semble disparaître pendant une ou plusieurs pressions.
3. À chacun de ces arrêts, saisissez document.activeElement dans la console des outils de développement et vérifiez si l’élément affiché se trouve dans un menu fermé, un panneau masqué ou hors de l’écran.
4. Laissez de côté un lien d’évitement qui apparaît quand il reçoit le focus : il est affiché une fois focalisé.

Conforme si

Chaque arrêt de tabulation se trouve sur quelque chose de visible, ou sur quelque chose qui apparaît quand il reçoit le focus, comme un lien d’évitement.

Non conforme si

Le focus s’arrête sur des contrôles situés dans des menus fermés, des panneaux masqués ou hors de l’écran : le parcours passe par des éléments invisibles, ce qui ne respecte pas le critère WCAG 2.4.3.

La fonction de chaque lien peut être déduite de son intitulé, ou de son intitulé avec la phrase, le paragraphe, l’élément de liste ou la cellule de tableau qui le contient

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur, Un lecteur d’écran

1. Listez les liens de la page avec la liste des liens d’un lecteur d’écran, ou parcourez-les avec Tab et lisez le nom de chacun dans le panneau Accessibilité des outils de développement.
2. Notez les liens dont le nom n’indique pas où ils mènent ni ce qu’ils font : noms vides, « cliquez ici », « lire la suite », « PDF », nom de fichier d’une icône.
3. Pour chacun, lisez la phrase, le paragraphe, l’élément de liste ou la cellule de tableau qui contient le lien, ou l’en-tête de tableau de sa cellule, et vérifiez si cela rend sa fonction claire.
4. Le contexte qui compte est la phrase, le paragraphe, l’élément de liste ou la cellule de tableau du lien, les cellules d’en-tête de sa cellule de tableau, le titre sous lequel il se trouve, et le texte lié au lien avec aria-describedby. Un texte simplement proche du lien, comme un paragraphe dans une autre colonne, ne compte pas.
5. Vérifiez que les liens de même nom qui mènent à des endroits différents se distinguent par leur contexte.

Conforme si

La fonction de chaque lien est claire d’après son nom, ou d’après son nom avec la phrase, le paragraphe, l’élément de liste ou la cellule de tableau qui le contient.

Non conforme si

Un lien n’a pas de nom, ou a un nom comme « lire la suite » dont rien autour n’explique la fonction, ce qui ne respecte pas le critère WCAG 2.4.4.

Règles qui le testent : link-name-present, link-name-quality

Il existe plus d’un moyen de trouver une page dans le site

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les titres décrivent le contenu qui les suit

• Seule une personne peut le vérifier
• Outils : Un lecteur d’écran

1. Listez les titres de la page avec la liste des titres d’un lecteur d’écran, une extension de navigateur comme HeadingsMap ou l’arbre d’accessibilité des outils de développement.
2. Lisez chaque titre et le contenu qui le suit.
3. Vérifiez que chaque titre indique le sujet de ce contenu, et qu’il ne s’agit pas d’un texte provisoire, d’un nom de fichier ou d’un mot qui pourrait servir de titre à n’importe quoi.
4. Vérifiez que des titres voisins de même niveau peuvent être distingués.
5. Ce critère demande seulement que les en-têtes et les étiquettes présents décrivent leur contenu. Un titre ou une étiquette manquant est vérifié au titre des critères 1.3.1 ou 3.3.2, pas ici.

Conforme si

Chaque titre indique le sujet du contenu qui le suit.

Non conforme si

Un titre ne décrit pas le contenu qui le suit, comme « Section 1 » ou un nom de fichier, ce qui ne respecte pas le critère WCAG 2.4.6.

Règles qui le testent : heading-quality

Les étiquettes décrivent leur champ, et les champs de même étiquette peuvent être distingués

• Seule une personne peut le vérifier
• Outils : un navigateur seulement

1. Lisez l’étiquette visible de chaque champ et de chaque contrôle de la page.
2. Vérifiez que chacune indique ce qu’il faut saisir ou choisir, comme « Adresse e-mail » plutôt que « Champ 1 » ou « Texte ».
3. Quand plusieurs champs partagent une étiquette, comme « Nom » deux fois, vérifiez que la page indique clairement lequel est lequel, par un titre de groupe ou par le reste de l’étiquette.

Conforme si

Chaque étiquette indique à quoi sert son champ ou son contrôle, et les champs de même étiquette sont distingués.

Non conforme si

Une étiquette n’indique pas à quoi sert son champ, ou plusieurs champs ont la même étiquette sans rien pour les distinguer, ce qui ne respecte pas le critère WCAG 2.4.6.

Règles qui le testent : form-control-label-quality

Chaque élément qui reçoit le focus clavier montre qu’il l’a

• Les règles en décident en partie
• Outils : Un clavier

1. Rechargez la page et parcourez-la entièrement avec Tab, lentement.
2. À chaque arrêt, vérifiez que vous voyez quel élément a le focus : un contour, un changement de couleur, un soulignement ou un autre changement visible.
3. Déplacez le focus au clavier, et non à la souris. Les navigateurs n’affichent pas de la même façon le focus d’un élément cliqué à la souris et celui d’un élément atteint avec Tab : un test à la souris ne prouve donc rien ici.
4. Notez chaque arrêt où vous ne pouvez pas savoir où est le focus, et chaque fois que le focus semble disparaître pendant une pression ou plus.
5. Faites de même dans les menus, les boîtes de dialogue et les widgets qui utilisent les touches fléchées.
6. Activez un thème de contraste dans Windows et refaites quelques arrêts. Un style de focus dessiné uniquement avec box-shadow ou une couleur d’arrière-plan disparaît dans ce mode. Les WCAG n’exigent pas qu’il y soit visible, mais notez-le comme un problème de bonne pratique.

Conforme si

À chaque arrêt, vous voyez quel élément a le focus.

Non conforme si

Le focus atteint un élément sans aucun changement visible, ou arrive sur quelque chose de masqué ou hors de l’écran : les utilisateurs du clavier ne savent plus où ils sont, ce qui ne respecte pas le critère WCAG 2.4.7.

Règles qui le testent : css-hidden-focus, css-focus-indicator-suppressed, focus-not-removed-by-script

Un élément qui reçoit le focus n’est pas entièrement masqué par un contenu que la page place par-dessus

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Ce que fait un geste avec tracé ou multipoint peut aussi être fait d’un simple toucher ou clic

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les actions se déclenchent au relâchement du pointeur, et non à l’appui, ou peuvent être annulées

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Le nom d’un contrôle contient le texte de son étiquette visible

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Repérez chaque contrôle doté d’une étiquette visible sous forme de texte : boutons, liens, champs, onglets, éléments de menu, et contrôles étiquetés par un texte voisin.
2. Pour chacun, lisez son nom dans le panneau Accessibilité des outils de développement.
3. Vérifiez que le nom contient les mots de l’étiquette visible, dans le même ordre, idéalement au début (un bouton qui affiche « Envoyer » nommé « Envoyer le message », et non « Valider »).
4. Ne tenez pas compte des différences de casse et de ponctuation dans la comparaison. Le texte sous forme d’image compte aussi comme étiquette visible.
5. Laissez de côté une étiquette composée uniquement de symboles, comme « × » ou « > » : le nom devrait dire ce que fait le contrôle.
6. Laissez de côté les contrôles sans texte visible, comme un bouton constitué uniquement d’une icône : ils n’ont pas d’étiquette visible à faire correspondre.

Conforme si

Le nom de chaque contrôle contient les mots de son étiquette visible, dans l’ordre.

Non conforme si

Le nom d’un contrôle ne contient pas son étiquette visible : une personne qui utilise la commande vocale ne peut pas l’activer en disant ce qu’elle voit, ce qui ne respecte pas le critère WCAG 2.5.3.

Règles qui le testent : label-in-name

Ce qui se fait en bougeant l’appareil peut aussi se faire avec des contrôles, et la réaction au mouvement peut être désactivée

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Ce qui se fait par glissement peut aussi se faire par de simples touchers ou clics

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les cibles font au moins 24 pixels CSS sur 24, ou sont suffisamment espacées

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Cherchez les petits contrôles : icônes, boutons de fermeture, pagination, liens alignés, petites cases à cocher.
2. Inspectez chacun et lisez dans le modèle de boîte des outils de développement la taille de la zone qui réagit au pointeur, qui peut être plus grande que l’icône visible. Vérifiez qu’elle est d’au moins 24 pixels CSS sur 24.
3. Quand elle est plus petite, vérifiez si un cercle de 24 pixels centré sur la cible toucherait une autre cible, ou le cercle d’une autre petite cible.
4. Laissez de côté les liens dans une phrase ou un paragraphe, les contrôles que le navigateur dessine sans mise en forme, les contrôles qui ont un équivalent de taille suffisante ailleurs dans la page, et les cibles dont la taille est essentielle, comme les repères d’une carte.

Conforme si

Chaque cible fait au moins 24 pixels CSS sur 24, ou est suffisamment éloignée des autres, ou relève de l’une des exceptions.

Non conforme si

Une cible de moins de 24 pixels CSS sur 24 est si proche d’une autre que leurs cercles de 24 pixels se chevauchent, sans qu’aucune exception s’applique, ce qui ne respecte pas le critère WCAG 2.5.8.

Règles qui le testent : target-size-minimum

La langue principale de la page est indiquée dans son balisage, et c’est la bonne

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Lisez l’attribut lang de l’élément <html> dans le panneau Éléments des outils de développement.
2. Vérifiez qu’il s’agit d’un code de langue (en, fr, pt-BR) et que c’est la langue de la majeure partie du texte de la page.
3. Quand <html> a aussi xml:lang, vérifiez que les deux indiquent la même langue.
4. Dans une application monopage, changez la langue de l’interface et vérifiez que lang change avec elle. Un lecteur d’écran ne change de voix que si une voix pour cette langue est installée : jugez donc d’après le balisage, et pas seulement d’après ce que vous entendez.

Conforme si

L’attribut lang de l’élément <html> indique la langue de la majeure partie de la page.

Non conforme si

La page n’a pas de lang, ou en a un erroné ou non valide : les lecteurs d’écran la lisent avec la mauvaise voix et la mauvaise prononciation, ce qui ne respecte pas le critère WCAG 3.1.1.

Règles qui le testent : html-lang-attr-present, html-xml-lang-mismatch

Les passages et les expressions dans une autre langue que celle de la page sont signalés avec leur propre langue

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur, Un lecteur d’écran

1. Lisez la page et notez les passages, citations, expressions et noms de choses écrits dans une autre langue que celle de la page, y compris les options d’un sélecteur de langue.
2. Pour chacun, vérifiez dans le panneau Éléments des outils de développement que lui-même, ou un élément qui l’entoure, a un attribut lang avec le code de cette langue.
3. Laissez de côté les noms propres, les termes techniques et les mots entrés dans la langue de la page, comme « café » en anglais.
4. Écoutez-en quelques-uns avec un lecteur d’écran pour vérifier qu’il change de prononciation.

Conforme si

Chaque passage ou expression dans une autre langue est signalé par un attribut lang valide pour cette langue.

Non conforme si

Un passage ou une expression dans une autre langue n’est pas signalé avec sa langue, ou l’est avec un code erroné : il est lu avec la mauvaise prononciation, ce qui ne respecte pas le critère WCAG 3.1.2.

Règles qui le testent : valid-lang

Le déplacement du focus sur un élément ne change pas le contexte à lui seul

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Changer un paramètre ne change pas le contexte, sauf si l’utilisateur en est averti au préalable

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

La navigation répétée sur plusieurs pages apparaît chaque fois dans le même ordre relatif

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les composants qui ont la même fonction d’une page à l’autre sont identifiés de la même façon

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

L’aide proposée sur plusieurs pages se trouve chaque fois au même endroit relatif

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Une erreur de saisie détectée par la page est indiquée par un texte qui précise quel champ est erroné et ce qui ne va pas

• Les règles en décident en partie
• Outils : Un clavier, Un lecteur d’écran

1. Repérez chaque formulaire de la page et envoyez-le vide, puis avec des valeurs erronées : une adresse e-mail mal formée, des lettres dans un champ numérique, une date passée.
2. Vérifiez que chaque erreur détectée par la page est indiquée sous forme de texte, et pas seulement par une couleur ou une icône, à côté du champ ou dans une liste en haut.
3. Vérifiez que le texte précise quel champ est erroné et ce qui ne va pas.
4. Les messages de validation propres au navigateur comptent comme du texte, mais leur formulation et la durée de leur affichage varient selon les navigateurs. Vérifiez-les dans chaque navigateur que vous testez.
5. Vérifiez avec un lecteur d’écran que l’erreur est annoncée ou facile à atteindre, et que chaque champ erroné est signalé comme non valide.

Conforme si

Chaque erreur de saisie détectée par la page est indiquée par un texte qui nomme le champ et le problème.

Non conforme si

Une erreur de saisie n’est indiquée que par une couleur ou une icône, n’est pas indiquée du tout, ou l’est sans préciser quel champ est erroné, ce qui ne respecte pas le critère WCAG 3.3.1.

Règles qui le testent : invalid-field-error-message

Les champs qui demandent une saisie ont une étiquette visible, et des instructions quand la saisie en nécessite

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Repérez chaque champ et chaque contrôle de la page qui demande une saisie.
2. Vérifiez que chacun a une étiquette visible sans survol ni saisie : pas seulement un texte indicatif qui disparaît quand vous tapez, ou un title affiché au survol.
3. Quand la saisie doit respecter des règles, comme un format de date, les exigences d’un mot de passe ou les champs obligatoires, vérifiez que la page l’indique avant que l’utilisateur envoie le formulaire.
4. Ce critère demande seulement que les étiquettes et les instructions soient affichées. Le lien entre une étiquette et son champ dans le balisage est vérifié au titre des critères 1.3.1 et 4.1.2.

Conforme si

Chaque champ a une étiquette visible, et la page donne les instructions nécessaires à la saisie avant l’envoi.

Non conforme si

Un champ n’a pas d’étiquette visible, seulement un texte indicatif ou un title au survol, ou les règles de saisie ne sont données qu’après une erreur, ce qui ne respecte pas le critère WCAG 3.3.2.

Règles qui le testent : form-control-programmatic-label-present, form-control-single-label, form-control-programmatic-label-quality

Quand la page sait comment corriger une erreur de saisie, elle l’indique

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les soumissions qui ont un effet juridique ou financier, ou qui modifient des données enregistrées, peuvent être annulées, vérifiées, ou relues et confirmées

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

Les informations que l’utilisateur a déjà données au cours d’un processus sont préremplies ou proposées au choix, et non demandées à nouveau

• Seule une personne peut le vérifier

Pas encore de procédure pour ceci.

La connexion n’exige pas de mémoriser, de retranscrire ou de résoudre quelque chose, sauf si un moyen de contournement est proposé

• Seule une personne peut le vérifier
• Outils : un navigateur seulement

1. Parcourez chaque moyen que le site propose pour vous connecter ou vérifier votre identité, avec un compte de test.
2. Notez chaque étape qui vous demande de mémoriser quelque chose (un mot de passe), de le retranscrire (un code venant d’un autre appareil) ou de résoudre quelque chose (un puzzle, un calcul, un choix d’images).
3. Pour un mot de passe ou un code, vérifiez que vous pouvez le coller et qu’un gestionnaire de mots de passe peut le remplir, afin qu’il n’ait pas à être mémorisé ni ressaisi.
4. Vérifiez qu’un gestionnaire de mots de passe remplit réellement les champs : les champs d’identifiant et de mot de passe ont besoin de autocomplete="username" et de autocomplete="current-password" (ou new-password), et un champ de code à usage unique fonctionne mieux avec autocomplete="one-time-code".
5. Quand un code est réparti dans une case par chiffre, collez le code entier dans la première case et vérifiez qu’il les remplit toutes. Des cases qui bloquent le collage, ou n’acceptent qu’un caractère chacune, ne sont pas conformes.
6. Pour les autres tests, vérifiez qu’une autre méthode est proposée, ou que le test demande seulement de reconnaître des objets ou un contenu que vous avez fourni au site.
7. Considérez un CAPTCHA affiché pendant la connexion comme faisant partie de la connexion. D’autres méthodes qui n’exigent aucun test cognitif, comme une clé d’accès, un lien de connexion envoyé par e-mail ou une connexion par un service tiers, sont des solutions de remplacement valables.

Conforme si

Chaque étape de connexion qui demande de mémoriser, de retranscrire ou de résoudre quelque chose permet le collage et les gestionnaires de mots de passe, ou propose un autre moyen, ou demande seulement de reconnaître des objets ou votre propre contenu.

Non conforme si

La connexion exige de mémoriser, de retranscrire ou de résoudre quelque chose sans moyen de contournement, comme un champ de code qui bloque le collage, ce qui ne respecte pas le critère WCAG 3.3.8.

Règles qui le testent : password-paste-enabled

Chaque lien, contrôle, cadre et boîte de dialogue a un nom qui indique sa fonction

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur, Un lecteur d’écran

1. Parcourez chaque lien, bouton, champ, cadre et contrôle personnalisé de la page, avec Tab et, à l’intérieur des widgets, avec les touches fléchées.
2. Pour chacun, lisez le nom dans le panneau Accessibilité des outils de développement, ou écoutez ce qu’annonce un lecteur d’écran.
3. Vérifiez les noms avec deux couples navigateur et lecteur d’écran. Les noms calculés à partir d’aria-labelledby, d’un label qui englobe le contrôle ou du content CSS peuvent différer de l’un à l’autre.
4. Vérifiez que chacun a un nom qui indique sa fonction, y compris les boutons constitués uniquement d’une icône, les cadres (« Lecteur vidéo », « Carte ») et les boîtes de dialogue.
5. Vérifiez que les cadres de même nom affichent la même chose, et que les noms fournis uniquement pour le braille ont un équivalent vocal.

Conforme si

Chaque lien, contrôle, cadre et boîte de dialogue a un nom qui indique sa fonction.

Non conforme si

Un lien, un contrôle, un cadre ou une boîte de dialogue n’a pas de nom, ou a un nom qui n’indique pas sa fonction : les technologies d’assistance n’annoncent que son rôle, ce qui ne respecte pas le critère WCAG 4.1.2.

Règles qui le testent : form-control-programmatic-label-present, link-name-present, button-name-present, input-image-alt-present, binary-control-name-present, combobox-name-present, dialog-name-present, menuitem-name-present, tab-name-present, slider-name-present, textbox-name-present, searchbox-name-present, spinbutton-name-present, listbox-name-present, option-name-present, treeitem-name-present, aria-role-name-present, iframe-name-present, identical-iframes-same-purpose, iframe-title-unique, summary-name-present, tooltip-name-present, aria-braille-equivalent

Le rôle de chaque contrôle indique ce qu’il fait, et les contrôles ne sont pas imbriqués les uns dans les autres

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur, Un lecteur d’écran

1. Pour chaque contrôle de la page, notez ce qu’il fait quand on l’utilise : ouvrir une page (un lien), agir sur la page (un bouton), basculer un état (une case à cocher ou un interrupteur), ouvrir une liste (un menu ou une zone de liste déroulante).
2. Lisez son rôle dans le panneau Accessibilité des outils de développement, ou écoutez un lecteur d’écran, et vérifiez que le rôle correspond à ce qu’il fait.
3. Soyez attentif aux contrôles personnalisés construits avec des div et des span, aux liens utilisés comme boutons et aux boutons utilisés comme liens.
4. Vérifiez qu’aucun contrôle n’en contient un autre, comme un bouton dans un lien, et que les contrôles dont les enfants sont présentationnels, comme un onglet ou un bouton, ne contiennent rien de focalisable.

Conforme si

Le rôle de chaque contrôle indique ce qu’il fait, et aucun contrôle n’est imbriqué dans un autre.

Non conforme si

Un contrôle n’a pas de rôle, en a un erroné (une div cliquable sans rôle, un lien qui agit comme un bouton), ou contient un autre contrôle, ce qui ne respecte pas le critère WCAG 4.1.2.

Règles qui le testent : aria-roles-valid, aria-deprecated-role, nested-interactive-controls-absent, presentational-children-focusable-absent

L’état et la valeur de chaque contrôle sont exposés et changent avec ce qui est affiché

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur, Un lecteur d’écran, Un clavier

1. Repérez les contrôles qui ont un état ou une valeur : cases à cocher, interrupteurs, boutons radio, sections et menus dépliables, onglets, curseurs, éléments sélectionnés, boutons enfoncés.
2. Lisez l’état et la valeur de chacun dans le panneau Accessibilité des outils de développement, ou écoutez-les avec un lecteur d’écran : coché, développé, sélectionné, enfoncé, l’élément courant (aria-current), et la valeur actuelle d’un curseur ou d’un sélecteur numérique.
3. Changez chacun au clavier et vérifiez que l’état ou la valeur lu change avec ce que vous voyez.
4. Pour un contrôle dépliable, vérifiez qu’il n’indique « développé » que tant que ce qu’il ouvre est affiché.

Conforme si

L’état et la valeur de chaque contrôle sont exposés et changent avec ce qui est affiché.

Non conforme si

L’état ou la valeur d’un contrôle n’est pas exposé, ou ne change pas quand il change à l’écran, comme une case à cocher personnalisée toujours annoncée comme non cochée, ce qui ne respecte pas le critère WCAG 4.1.2.

Règles qui le testent : aria-required-attr, aria-conditional-attr, aria-checked-state-mismatch, aria-expanded-state-mismatch

Les attributs ARIA sont réels, valides et autorisés là où ils se trouvent, et rien de focalisable n’est masqué aux technologies d’assistance

• Les règles en décident en partie
• Outils : Les outils de développement du navigateur

1. Dans le panneau Éléments des outils de développement, cherchez aria- et role= dans le code et examinez chaque occurrence.
2. Vérifiez que chaque attribut aria-* existe réellement, a une valeur valide et est autorisé pour le rôle de son élément.
3. Vérifiez que les id vers lesquels pointent aria-labelledby, aria-describedby, aria-controls et les attributs similaires existent, une seule fois chacun.
4. Vérifiez que rien de ce qui reçoit le focus ne se trouve dans un élément avec aria-hidden="true", et que <body> n’est pas masqué.

Conforme si

Les attributs ARIA sont réels, valides et autorisés là où ils se trouvent, leurs id sont uniques, et rien de focalisable n’est masqué.

Non conforme si

Un attribut ARIA est mal orthographié, a une valeur non valide ou n’est pas autorisé pour son rôle, un id vers lequel il pointe est absent ou répété, ou un élément focalisable est masqué aux technologies d’assistance, ce qui ne respecte pas le critère WCAG 4.1.2.

Règles qui le testent : aria-hidden-focus, aria-valid-attr, aria-valid-attr-value, aria-allowed-attr, aria-prohibited-attr, aria-hidden-body, duplicate-id-aria

Les messages d’état sont annoncés par les technologies d’assistance sans prendre le focus

• Seule une personne peut le vérifier
• Outils : Un lecteur d’écran

1. Repérez les messages que la page affiche sans déplacer le focus : « Ajouté au panier », nombre de résultats d’une recherche, « Enregistré », progression, erreurs de formulaire listées après l’envoi.
2. Activez un lecteur d’écran et déclenchez chaque message, par l’action qui l’affiche.
3. Vérifiez que le lecteur d’écran annonce le message sans que le focus se déplace vers lui.
4. Recommencez avec un deuxième couple navigateur et lecteur d’écran. Les régions dynamiques font partie des aspects les moins homogènes de la prise en charge par les lecteurs d’écran.
5. Quand il n’annonce rien, vérifiez dans les outils de développement que le message se trouve dans un élément avec role="status", role="alert" ou aria-live, et que l’élément n’est pas masqué. Une région role="status" ou aria-live doit déjà être présente dans la page, vide, avant que le message y soit inséré. Un élément avec role="alert" est généralement annoncé même quand il est ajouté en même temps que son message.
6. Laissez de côté les messages qui reçoivent le focus, ou qui arrivent avec une nouvelle page : ce ne sont pas des messages d’état, et ils sont vérifiés au titre d’autres critères.

Conforme si

Chaque message d’état est annoncé par un lecteur d’écran sans que le focus se déplace vers lui.

Non conforme si

Un message d’état apparaît à l’écran mais le lecteur d’écran ne l’annonce pas, ce qui ne respecte pas le critère WCAG 4.1.3.

Règles qui le testent : live-region-announcements