Un ordre de tabulation logique est important pour que les utilisateurs bénéficient d'une expérience fluide au clavier. Les lecteurs d'écran et autres technologies d'assistance permettent de naviguer sur la page dans l'ordre DOM. Le flux d'informations doit avoir du sens.
Effectuer un test manuel
Pour vérifier si l'ordre des onglets de votre application est logique, essayez de parcourir votre page à l'aide de la touche Tabulation. En général, le focus doit suivre l'ordre de lecture, de haut en bas de la page. Dans la plupart des langues, l'ordre de lecture se déplace de gauche à droite. Dans certaines langues, comme l'arabe et l'hébreu, l'ordre de lecture est de droite à gauche.
Deux idées principales doivent être prises en compte lorsque vous évaluez l'ordre des onglets :
- Les éléments du DOM sont-ils organisés dans un ordre logique ?
- Le contenu hors écran est-il correctement masqué dans la navigation ?
Remarquez les sauts de navigation qui vous semblent gênants. Notez également tout saut en dehors de l'écran, où la touche de tabulation vous redirige vers un contenu qui n'est pas censé être visible.
Pour en savoir plus, consultez Principes de base de l'accès au clavier.
Solution
Si l'ordre de sélection semble incorrect, réorganisez les éléments du DOM pour rendre l'ordre des onglets plus naturel.
Évitez d'utiliser du CSS pour repositionner visuellement les éléments, car les utilisateurs de technologies d'assistance auront une navigation absurde. Au lieu d'utiliser CSS, déplacez l'élément vers une position antérieure dans le DOM.
Si le contenu hors écran est toujours accessible aux commandes du clavier, envisagez de le supprimer à l'aide de tabindex="-1".
Pour en savoir plus, consultez Contrôler le focus avec l'index de tabulation.
Ressources
Code source de l'audit L'ordre visuel de la page suit l'ordre DOM