Principes de base de l'accès au clavier

De nombreux utilisateurs différents se servent du clavier pour naviguer dans les applications, qu'ils aient des troubles moteurs temporaires ou permanents ou qu'ils utilisent des raccourcis clavier pour être plus efficaces et productifs. Une bonne stratégie de navigation via le clavier pour votre application améliore l'expérience pour tous les utilisateurs.

Mise au point et ordre des onglets

À un moment donné, le 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 les entrées du clavier. En plus de recevoir des événements de clavier, l'élément sélectionné reçoit également le contenu collé depuis le presse-papiers.

Pour déplacer le focus sur une page, utilisez TAB pour avancer et SHIFT + TAB pour reculer. L'élément actuellement sélectionné est souvent indiqué par un anneau de sélection. Les styles des anneaux de sélection varient d'un navigateur à l'autre. L'ordre dans lequel le focus se déplace vers l'avant et vers l'arrière via 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 disposent également d'une gestion intégrée des événements de clavier. Les éléments tels que les paragraphes et les divs ne peuvent pas être mis en surbrillance de manière implicite, car les utilisateurs n'ont généralement pas besoin d'interagir avec eux.

Implémenter un ordre de tabulation logique est essentiel 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 votre tabulation:

  1. Organiser les éléments du DOM dans un ordre logique
  2. Définir correctement la visibilité du contenu hors écran qui ne doit pas être sélectionné

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

Pour vérifier si l'ordre des onglets de votre application est logique, essayez de parcourir votre page à l'aide de la touche Tabulation. En général, le focus doit suivre l'ordre de lecture, de gauche à droite, de haut en bas de la page.

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 souhaitez qu'un élément apparaisse visuellement plus tôt à l'écran, déplacez-le plus tôt dans le DOM.

Essayez de passer d'un ensemble de boutons à l'autre ci-dessous pour découvrir un ordre logique des onglets par rapport à un ordre illogique:

Ordre logique des onglets

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 des onglets illogique

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

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 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 ne doivent pas figurer dans l'ordre des onglets. Par exemple, si vous avez une barre latérale responsive qui s'ouvre lorsque vous cliquez sur un bouton, l'utilisateur ne doit pas pouvoir se concentrer sur la barre latérale lorsqu'elle est fermée.

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

  • display: none
  • visibility: 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: block
  • visibility: visible

Étapes suivantes

Pour les utilisateurs qui utilisent presque entièrement leur ordinateur avec le clavier ou un autre appareil d'entrée, un ordre logique des onglets est essentiel pour rendre votre application accessible et utilisable. Pour vérifier l'ordre des onglets, nous vous recommandons de faire défiler votre application à l'aide des onglets avant chaque publication.