De nombreux utilisateurs différents s'appuient sur le clavier pour naviguer dans les applications, qu'il s'agisse d'utilisateurs souffrant de handicaps moteurs temporaires et permanents, ou d'utilisateurs qui utilisent des raccourcis clavier pour être plus efficaces et plus productifs. L'ordre de tabulation logique est un élément important pour offrir une expérience de navigation fluide au clavier.
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. L'ordre dans lequel les éléments sont sélectionnés doit suivre l'ordre du DOM. En général, le focus doit suivre l'ordre de lecture, qui s'effectue de gauche à droite, du haut vers le bas de la page.
Pour en savoir plus, consultez Principes de base de l'accès au clavier.
Pouvez-vous accéder à toutes les commandes interactives de la page ?
Si ce n'est pas le cas, vous devrez peut-être utiliser tabindex pour améliorer la sélection de ces commandes.
En règle générale, toute commande avec laquelle un utilisateur peut interagir ou avec laquelle il peut fournir une entrée doit être sélectionnable et afficher un indicateur de mise au point.
Si un utilisateur de clavier ne voit pas les éléments sélectionnés, il n'a aucun moyen d'interagir avec la page.
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 n'êtes pas en mesure d'accéder à toutes les commandes interactives de la page, la première solution consiste à remplacer les commandes personnalisées par des alternatives HTML standardisées.
Par exemple, remplacez une <div> agissant comme un bouton par <button>.
L'utilisation d'éléments HTML intégrés peut considérablement améliorer l'accessibilité de votre site et réduire considérablement votre charge de travail.
Si vous créez des composants interactifs personnalisés sans équivalent HTML standardisé, utilisez l'attribut tabindex pour vous assurer qu'ils sont accessibles via le clavier.
Exemple :
<div tabindex="0">Focus me with the TAB key</div>
Pour en savoir plus, consultez Contrôler le curseur à l'aide de la touche tabindex.
Ressources
Code source pour l'audit La page a un ordre de tabulation logique