De nombreux utilisateurs différents se servent du clavier pour naviguer dans les applications, qu'ils souffrent de déficiences motrices temporaires ou permanentes, ou qu'ils utilisent des raccourcis clavier pour être plus efficaces et productifs. Un ordre logique des onglets est essentiel pour offrir une expérience de navigation fluide au clavier.
Effectuer un test manuel
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 mis au point doit suivre l'ordre DOM. En général, le focus doit suivre l'ordre de lecture, de gauche à droite, de haut en bas de la page.
Pour en savoir plus, consultez la section 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 fournir une entrée doit pouvoir être sélectionnée et afficher un indicateur de sélection.
Si un utilisateur du clavier ne peut pas voir ce qui est sélectionné, il ne peut pas interagir avec la page.
Solution
Si l'ordre de focus semble incorrect, vous devez réorganiser les éléments dans le DOM pour que l'ordre de tabulation soit plus naturel.
Si vous n'avez pas accès
à 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 un <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 de 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 focus avec tabindex.
Ressources
Code source de l'audit L'ordre de tabulation logique de la page