De nombreux utilisateurs utilisent le clavier pour naviguer dans les applications, qu'il s'agisse de personnes souffrant de déficiences motrices temporaires ou permanentes ou de raccourcis clavier pour gagner en efficacité et en productivité. Une bonne stratégie de navigation au clavier pour votre application améliore l'expérience de tous les utilisateurs.
Sélection et ordre de tabulation
À un moment donné, le ciblage fait référence à l'élément de votre application (tel qu'un champ, une case à cocher, un bouton ou un lien) qui reçoit actuellement une entrée du clavier. En plus de recevoir les événements du clavier, l'élément sélectionné reçoit également le contenu collé depuis le presse-papiers.
Pour déplacer le curseur sur une page, utilisez TAB pour avancer et SHIFT + TAB pour revenir en arrière. L'élément actuellement sélectionné est souvent indiqué par un anneau de mise au point, qui varie en fonction du navigateur. L'ordre dans lequel la sélection se déplace vers l'avant et vers l'arrière à travers les éléments interactifs est appelé ordre de tabulation.
Les éléments HTML interactifs tels que les champs de texte, les boutons et les listes de sélection sont implicitement sélectionnables: ils sont automatiquement insérés dans l'ordre de tabulation en fonction de leur position dans le DOM. Ces éléments interactifs intègrent également une gestion des événements de clavier. Les éléments tels que les paragraphes et les div ne sont pas implicitement sélectionnables, car les utilisateurs n'ont généralement pas besoin d'interagir avec eux.
L'implémentation d'un ordre de tabulation logique est importante pour offrir à vos utilisateurs une expérience de navigation fluide avec le clavier. Il y a deux idées principales à garder à l'esprit lors de l'évaluation et de l'ajustement de l'ordre de votre tabulation:
- Organiser les éléments du DOM de sorte qu'ils soient dans un ordre logique
- Définir correctement la visibilité du contenu hors écran qui ne doit pas être sélectionné
Organiser les éléments du DOM de sorte qu'ils soient dans un ordre logique
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, l'élément d'interface actif doit suivre l'ordre de lecture, en allant de gauche à droite, du haut vers le bas de votre page.
Si l'ordre de focus vous semble incorrect, vous devez réorganiser les éléments dans le DOM pour que l'ordre de tabulation soit plus naturel. Si vous souhaitez qu'un élément apparaisse visuellement plus tôt à l'écran, déplacez-le plus tôt dans le DOM.
Essayez de parcourir les deux ensembles de boutons ci-dessous pour expérimenter un ordre de tabulation logique par rapport à un ordre de tabulation illogique:
Ordre de tabulation logique
Ordre de tabulation non logique
Le code de ces deux exemples est comparé ci-dessous:
Ordre de tabulation logique
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Ordre de tabulation non logique
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Soyez prudent lorsque vous modifiez la position visuelle des éléments à l'aide de CSS pour éviter de créer un ordre de tabulation illogique. Pour corriger l'ordre de tabulation illogique ci-dessus, déplacez le bouton flottant "Kiwi" pour le placer après le bouton "Coconut" dans le DOM, puis supprimez le style intégré.
Définir correctement la visibilité du contenu hors écran
Parfois, les éléments interactifs hors écran doivent se trouver dans le DOM, mais pas dans votre ordre de tabulation. Par exemple, si vous disposez d'une navigation latérale responsive qui s'ouvre lorsque vous cliquez sur un bouton, l'utilisateur ne doit pas pouvoir se concentrer sur la barre de navigation latérale lorsqu'elle est fermée.
Pour éviter qu'un élément interactif particulier ne soit sélectionné, vous devez lui attribuer l'une des propriétés CSS suivantes:
display: nonevisibility: hidden
Pour ajouter de nouveau l'élément dans l'ordre de tabulation, par exemple lorsque la barre de navigation latérale est ouverte, remplacez respectivement les propriétés CSS ci-dessus par:
display: blockvisibility: visible
Étapes suivantes
Pour les utilisateurs qui utilisent presque entièrement leur ordinateur avec le clavier ou un autre périphérique d'entrée, un ordre de tabulation logique est essentiel pour rendre votre application accessible et utilisable. Une bonne habitude de vérifier l'ordre des onglets est d'essayer de parcourir votre application avant chaque publication.