focus-order-semantics
Les éléments ajoutés à l’ordre de tabulation devraient avoir une sémantique interactive
Signale, pour revue manuelle, les éléments dotés de tabindex >= 0 dont le rôle explicite est un rôle structurel ou de document non interactif (p. ex. heading, list, note, presentation).
Applicabilité. Éléments dotés d’un tabindex explicite de 0 ou plus (dans l’ordre de tabulation) ET d’un attribut role explicite qui se résout en l’un des rôles d’un ensemble choisi de rôles structurels ou de document clairement non interactifs. L’attribut est une liste de repli : son premier jeton connu et non abstrait, sans tenir compte de la casse, est le rôle (role="foo HEADING" est un titre, role="foo" n’est aucun rôle).
Attendu. Un élément placé volontairement dans l’ordre de tabulation devrait indiquer pourquoi il peut recevoir le focus : un rôle comme heading, list, note ou presentation ne donne aux technologies d’assistance aucune sémantique interactive à annoncer, ce qui déroute les utilisateurs du clavier qui arrivent dessus sans aucune indication de ce que ferait son activation (si elle fait quelque chose).
Ce que rapporte un constat.
tabindex: letabindexde l’élément, sous forme de nombre (0 ou plus).role: le rôle non interactif que porte l’élément.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<div role="heading" tabindex="0">Fake focusable heading</div>
Un rôle heading n’a aucun comportement interactif ; le rendre tabulable est donc inhabituel et mérite un coup d’œil.
<div role="button" tabindex="0">Real custom button</div>
role="button" est un rôle interactif, il est donc normal qu’il soit tabulable.
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.
TABBABLE_WITH_NON_INTERACTIVE_ROLE
- Appuyez sur Tab jusqu’à ce que le focus atteigne l’élément indiqué par le rapport et écoutez avec un lecteur d’écran, ou lisez son rôle dans le panneau Accessibilité.
- Cherchez pourquoi il est focalisable : défile-t-il (son contenu déborde et les touches fléchées le font défiler), ou fait-il quelque chose quand on clique dessus ou qu’on appuie sur Entrée ou Espace ?
- S’il se comporte comme un contrôle, comparez le rôle annoncé avec ce qu’il fait.
Réussite. L’élément est focalisable pour une raison que son rôle justifie, comme une zone défilante qu’un utilisateur du clavier doit faire défiler, et il ne se comporte pas comme un contrôle.
Échec. L’élément se comporte comme un contrôle (il ouvre, bascule ou fait naviguer) mais est annoncé avec un rôle non interactif comme heading ou list : les utilisateurs du clavier ne savent pas ce qu’il fait ; c’est un manquement aux bonnes pratiques lié au critère WCAG 4.1.2. S’il ne fait rien et ne défile pas, c’est un arrêt de tabulation inutile.