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 des onglets de votre application est logique, essayez de parcourir votre page à l'aide des onglets. 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.
Avez-vous accès à 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 de clavier ne peut pas voir l'élément sélectionné, il ne peut pas interagir avec la page.
Solution
Si l'ordre de sélection semble incorrect, vous devez réorganiser les éléments du DOM pour rendre l'ordre des onglets plus naturel.
Si vous ne parvenez pas à 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 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 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 au 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 La page présente un ordre logique des onglets