menuitem-name-present
Les éléments de menu ont un nom accessible
Vérifie que les éléments de menu (role="menuitem*", y compris les variantes checkbox/radio) exposent un nom accessible non vide.
Applicabilité. S’applique aux éléments dont l’attribut role se résout en menuitem, menuitemcheckbox ou menuitemradio (le premier jeton désignant un rôle connu, sans tenir compte de la casse, donc role="foo menuitem" et role="MENUITEM" comptent) qui sont inclus dans l’arbre d’accessibilité. 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. L’élément a un nom accessible non vide provenant d’aria-label, d’un aria-labelledby qui se résout en texte non vide, de title ou, puisque ces trois rôles tirent leur nom du contenu (name-from-content), du texte de son propre sous-arbre, où le nom propre d’un descendant (un <img alt>, aria-label ou title) compte comme la contribution de ce descendant, et pas seulement ses nœuds texte.
Exemples
<div role="menuitem" tabindex="0">Cut</div>
Le contenu textuel visible est une source de nom valide pour role="menuitem".
<div role="menuitem" tabindex="0"></div>
Ni nom, ni contenu.
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_closedContent
- Repérez l’élément de menu indiqué par le rapport et notez le texte ou l’icône affiché à l’écran.
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et lisez le nom accessible de l’élément, que le navigateur tire d’un contenu qu’aucun script ne peut lire.
- 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 l’élément de menu, tiré de son contenu, et le lecteur d’écran l’annonce.
Échec. L’élément de menu n’a pas de nom dans l’arbre d’accessibilité, car son contenu n’en donne aucun, ce qui ne respecte pas le critère WCAG 4.1.2.
name_contentTooDeep
- Repérez l’élément de menu indiqué par le rapport et notez le texte affiché à l’écran.
- Ouvrez le panneau Accessibilité des outils de développement du navigateur et lisez le nom accessible de l’élément, que le navigateur tire de tout son contenu imbriqué.
- 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 l’élément de menu, tiré de son contenu imbriqué, et le lecteur d’écran l’annonce.
Échec. L’élément de menu n’a pas de nom dans l’arbre d’accessibilité, car son contenu n’en donne aucun, ce qui ne respecte pas le critère WCAG 4.1.2.
name_internals
- Inspectez l’élément de menu 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 l’élément de menu, défini par ses internals ou autrement, et le lecteur d’écran l’annonce.
Échec. L’élément de menu 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.