De nombreux utilisateurs utilisent le clavier pour naviguer dans les applications. avec des handicaps moteurs temporaires et permanents pour les utilisateurs qui se servent du clavier raccourcis pour être plus efficace et productif. Avoir une bonne navigation au clavier pour votre application afin d'améliorer l'expérience de tous les utilisateurs.
Sélection et ordre de tabulation
À un moment donné, le ciblage fait référence aux éléments de votre application (tels que un champ, une case à cocher, un bouton ou un lien) reçoit actuellement des entrées du clavier. En plus de recevoir les événements de clavier, l'élément sélectionné reçoit également du contenu qui est collé depuis le presse-papiers.
Pour déplacer le curseur sur une page, utilisez TAB pour naviguer vers l'avant et SHIFT + TAB
pour revenir en arrière. L'élément actuellement sélectionné est souvent indiqué par
anneau de mise au point, et les divers navigateurs appliquent un style différent à celui-ci. La
ordre dans lequel le focus se déplace vers l'avant et vers l'arrière à travers des éléments interactifs
est appelé ordre de tabulation.
Les éléments HTML interactifs comme les champs de texte, les boutons et les listes de sélection sont implicitement sélectionnable: elles sont automatiquement insérées dans l'ordre de tabulation ; en fonction de leur position DOM Ces éléments interactifs intègrent également une gestion des événements de clavier. Elements comme les paragraphes et les div, ne sont pas implicitement sélectionnables, car les utilisateurs n'ont pas besoin d'interagir avec eux.
Implémenter un ordre de tabulation logique est un élément important pour fournir à vos utilisateurs avec une 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:
- Organiser les éléments du DOM de sorte qu'ils soient dans un ordre logique
- Définissez correctement la visibilité du contenu hors écran qui ne doit pas recevoir sélectionner
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 faire défiler votre . En général, le focus 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 rendre l'ordre de tabulation plus naturel. Si vous voulez que quelque chose apparaisse visuellement à l'écran, déplacez-la plus tôt dans le DOM.
Essayez de naviguer entre les deux jeux de boutons ci-dessous pour essayer d'utiliser un onglet logique ordre de tabulation 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 afin d'éviter créant ainsi un ordre de tabulation illogique. Pour corriger l'ordre de tabulation illogique ci-dessus, déplacez le "Kiwi" flottant pour le placer après "Noix de coco". dans le DOM, et 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 ne doivent pas l'être 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 quand il est fermé.
Pour éviter qu'un élément interactif particulier ne soit sélectionné, vous devez attribuer à l'élément l'une des propriétés CSS suivantes:
display: nonevisibility: hidden
Pour ajouter de nouveau l'élément à l'ordre de tabulation, par exemple lorsque la barre de navigation latérale est , remplacez respectivement les propriétés CSS ci-dessus par:
display: blockvisibility: visible
Étapes suivantes
Pour les utilisateurs qui utilisent leur ordinateur presque entièrement avec un 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 pour vérifier l’ordre de votre onglet essayez de parcourir la touche de tabulation dans votre application avant chaque publication.