binary-control-name-present
Les contrôles binaires ont un nom accessible
Vérifie que les contrôles checkbox, radio et switch exposent un nom accessible non vide.
Applicabilité. S’applique aux éléments dont l’attribut role se résout en checkbox, radio ou switch (le premier jeton désignant un rôle connu, sans tenir compte de la casse, donc role="foo switch" et role="SWITCH" comptent) qui sont inclus dans l’arbre d’accessibilité. Un <input type="checkbox">/<input type="radio"> natif n’est dans le périmètre que s’il porte explicitement l’un de ces rôles ; sans attribut role, il relève de form-control-programmatic-label-present. Un élément personnalisé auquel ses ElementInternals donnent l’un de ces rôles (this.attachInternals().role), sans attribut role qui en nomme un autre, est lui aussi dans le périmètre : c’est son rôle par défaut, et aucune autre règle ne le vérifie.
Attendu. Le contrôle a un nom accessible non vide issu d’aria-label, d’un aria-labelledby qui se résout en texte non vide, ou de title. Une case à cocher ou un bouton radio natif accepte en plus un <label> associé, l’API labels, un <label> englobant ou label[for], avec au plus quatre libellés lus pour garantir le déterminisme ; tout autre élément accepte le texte de son propre sous-arbre, ces rôles tirant leur nom de leur contenu.
Exemples
<div role="switch" tabindex="0" aria-checked="false" aria-label="Bluetooth"></div>
aria-label donne un nom accessible au switch.
<div role="switch" tabindex="0" aria-checked="false"></div>
Le switch n’a de nom issu d’aucun mécanisme pris en charge.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
name_internals
- Inspectez le contrôle indiqué par le rapport, un élément personnalisé, et notez son rôle.
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et lisez le nom accessible de l’élément.
- Avec un lecteur d’écran, placez-vous sur l’élément et écoutez le nom annoncé.
Réussite. L’arbre d’accessibilité montre un nom pour le contrôle, défini par ses internals ou autrement, et le lecteur d’écran l’annonce.
Échec. Le contrôle n’a pas de nom dans l’arbre d’accessibilité et le lecteur d’écran n’annonce que son rôle, ce qui ne respecte pas le critère WCAG 4.1.2.