Principes de base de l'accès au clavier

Rob Dodson

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 de personnes qui utilisent des raccourcis clavier pour être plus efficaces et productives. Mettre en place une stratégie pertinente de navigation via le clavier pour votre application permet d'offrir une meilleure expérience à tous les utilisateurs.

Focus et ordre des onglets

À un moment donné, le focus désigne l'élément de votre application qui reçoit activement des entrées au clavier, comme un champ, une case à cocher, un bouton ou un lien. En plus des événements de clavier, l'élément sélectionné reçoit également le contenu collé depuis le presse-papiers.

Pour déplacer la sélection sur une page, utilisez TAB pour naviguer "vers l'avant" et SHIFT + TAB pour naviguer "vers l'arrière". L'élément sélectionné est souvent indiqué par un anneau de sélection, et différents navigateurs stylisent leurs anneaux de sélection différemment. L'ordre dans lequel la sélection se déplace vers l'avant et vers l'arrière 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 focalisables de manière implicite : ils sont automatiquement insérés dans l'ordre de tabulation en fonction de leur position dans le DOM. Ces éléments interactifs disposent également d'une gestion intégrée des événements clavier. Les éléments tels que les paragraphes et les divs 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 essentielle pour offrir à vos utilisateurs une expérience de navigation au clavier fluide. Lorsque vous évaluez et ajustez l'ordre de tabulation, vous devez garder à l'esprit deux idées principales :

  1. Organiser les éléments dans le DOM dans un ordre logique
  2. Définir correctement la visibilité du contenu hors écran qui ne doit pas recevoir le focus

Organiser les éléments dans le DOM dans un ordre logique

Pour vérifier si l'ordre de tabulation de votre application est logique, essayez de parcourir votre page à l'aide de la touche de tabulation. En général, la mise au point doit suivre l'ordre de lecture, en se déplaçant de gauche à droite, de haut en bas de la page.

Si l'ordre de mise au point semble incorrect, vous devez réorganiser les éléments dans le DOM pour rendre l'ordre de tabulation plus naturel. Pour modifier l'agencement visuel de votre site, déplacez-le plus tôt dans le DOM au lieu de le styliser pour qu'il apparaisse plus tôt avec CSS.

Exemple :

À éviter
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
 Le bouton kiwi est flottant, ce qui crée un ordre de sélection illogique.
À faire
<button>Peach</button>
<button>Coconut</button>
<button>Kiwi</button>
 Organisez votre code HTML de manière à ce que l'ordre de tabulation soit celui que vous souhaitez.

Faites attention 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 illogique des onglets, nous avons déplacé le bouton flottant "Kiwi" après "Coconut" et supprimé le style intégré.

Définir correctement la visibilité du contenu hors écran

Parfois, des éléments interactifs hors écran doivent se trouver dans le DOM, mais pas dans l'ordre de tabulation. Par exemple, si vous avez une navigation responsive qui s'ouvre dans une barre latérale lorsque l'utilisateur clique sur un bouton, il ne devrait pas pouvoir se concentrer sur la navigation lorsqu'elle est fermée.

Pour empêcher un élément interactif particulier de recevoir le focus, vous devez lui attribuer l'une des propriétés CSS suivantes :

  • display: none
  • visibility: hidden

Pour ajouter à nouveau l'élément à l'ordre de tabulation, par exemple lorsque la navigation est ouverte, remplacez respectivement ces propriétés CSS par :

  • display: block
  • visibility: visible

Étapes suivantes

Pour les utilisateurs qui utilisent leur ordinateur presque entièrement 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, essayez de parcourir votre application à l'aide de la touche de tabulation avant chaque publication.