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.

À 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 peuvent être mis en surbrillance de manière implicite: ils sont automatiquement insérés dans l'ordre des onglets 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 sélectionnés 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. Deux idées principales doivent être prises en compte lorsque vous évaluez et ajustez l'ordre des onglets:

  1. Organiser les éléments du DOM dans un ordre logique
  2. Définissez correctement la visibilité du contenu hors écran qui ne doit pas être mis au premier plan.

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

Le code de ces deux exemples est comparé ci-dessous:

Ordre logique des onglets

<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" afin qu'il se trouve après le bouton "Coconut" dans le DOM, puis supprimez le style en ligne.

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 à nouveau l'élément dans l'ordre des onglets, par exemple lorsque la barre latérale est ouverte, remplacez 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.