L'implémentation d'un ordre de tabulation logique est un élément important pour fournir à vos utilisateurs une expérience de navigation fluide au clavier. Les lecteurs d'écran et autres technologies d'assistance parcourent la page dans l'ordre DOM. Le flux d'informations doit avoir du sens.
Tester manuellement
Pour vérifier si l'ordre de tabulation de votre application est logique, essayez de parcourir votre page avec la touche de tabulation. En général, le focus doit suivre l'ordre de lecture, qui se déplace de gauche à droite, du haut vers le bas de la page.
Lorsque vous évaluez l'ordre de vos onglets, tenez compte de ces deux idées principales:
- Les éléments du DOM sont-ils disposés dans un ordre logique ?
- Le contenu hors écran est-il correctement masqué dans la navigation ?
Notez tous les sauts dans la navigation qui semblent bruyants. Notez également tous les sauts hors écran, où la touche de tabulation vous amène vers du contenu qui n'est pas censé être visible.
Pour en savoir plus, consultez Principes de base de l'accès au clavier.
Solutions
Si l'ordre de mise au point semble incorrect, réorganisez les éléments dans le DOM afin de rendre l'ordre de tabulation plus naturel.
Si vous avez utilisé CSS pour repositionner visuellement des éléments, les utilisateurs de technologies d'assistance verront une navigation absurde. Au lieu d'utiliser le 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 curseur à l'aide de la touche tabindex.
Ressources
Code source pour l'audit L'ordre visuel sur la page suit l'ordre DOM