De nombreux utilisateurs s'appuient sur le clavier pour naviguer dans les applications, qu'il s'agisse de personnes souffrant de troubles moteurs temporaires ou permanents, ou d'utilisateurs qui utilisent des raccourcis clavier pour gagner en efficacité et en productivité. Disposer d'une bonne stratégie de navigation au clavier pour votre application crée une meilleure expérience pour tous.
Sélectionner et ordre de tabulation
À un moment donné, le champ focus 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 des entrées du clavier. En plus de recevoir les événements du clavier, l'élément sélectionné reçoit également le contenu collé à partir du presse-papiers.
Pour déplacer le curseur sur une page, utilisez TAB pour naviguer "avant" et SHIFT + TAB pour "revenir en arrière". L'élément sélectionné est souvent indiqué par un anneau de mise au point, et selon le navigateur, ces cercles n'ont pas le même style. L'ordre dans lequel la sélection avance et recule dans 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 la gestion des événements au clavier. Les éléments tels que les paragraphes et les divisions 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 un élément important pour offrir à vos utilisateurs une expérience de navigation fluide au clavier. Il y a deux idées principales à garder à l'esprit lors de l'évaluation et de l'ajustement de l'ordre de tabulation:
- Disposer les éléments dans le DOM dans l'ordre logique
- Définissez correctement la visibilité du contenu hors écran qui ne doit pas être sélectionné.
Disposer les éléments dans le DOM dans l'ordre logique
Pour vérifier si l'ordre de tabulation de votre application est logique, essayez de parcourir votre page en utilisant la touche de tabulation. En général, le focus doit suivre l'ordre de lecture, en se déplaçant de gauche à droite, du haut vers le bas de la page.
Si l'ordre du curseur semble incorrect, réorganisez les éléments dans le DOM pour le rendre plus naturel. Si vous souhaitez qu'un élément apparaisse plus tôt sur l'écran, déplacez-le plus tôt dans le DOM.
Parcourez les deux ensembles de boutons ci-dessous pour utiliser un ordre de tabulation logique par rapport à un ordre de tabulation illogique:
Ordre logique des tabulations
Ordre de tabulation illogique
Le code de ces deux exemples est comparé ci-dessous:
Ordre logique des tabulations
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Ordre de tabulation illogique
<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" afin qu'il se trouve après le bouton "Noix de coco" 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 une barre de navigation latérale responsive 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 réintégrer 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. Pour prendre l'habitude de vérifier l'ordre de tabulation, utilisez la touche de tabulation dans votre application avant chaque publication.