Utilisation de l'index de tabulation

Dave Gash

Meggin Kearney

Rob Dodson

Alexandra Klepper

L'ordre de tabulation par défaut fourni par la position DOM des éléments HTML sémantiques est pratique, mais il peut arriver que vous deviez le modifier. L'idéal est de déplacer les éléments dans le code HTML, mais cela n'est pas toujours possible. Dans ce cas, vous pouvez utiliser l'attribut HTML tabindex pour définir explicitement la position de tabulation d'un élément.

tabindex peut être appliqué à n'importe quel élément, bien que cela ne soit pas forcément utile sur tous les éléments. Il accepte une plage de valeurs entières. Avec tabindex, vous pouvez spécifier un ordre explicite pour les éléments de page pouvant être sélectionnés, insérer un élément qui ne peut pas l'être dans l'ordre de tabulation et supprimer des éléments de l'ordre de tabulation. Exemple :

tabindex="0" : insère un élément dans l'ordre de tabulation naturel. L'élément peut être sélectionné en appuyant sur la touche Tabulation ou en appelant sa méthode focus().

tabindex="-1" : supprime un élément de l'ordre de tabulation naturel, mais l'élément peut toujours être sélectionné en appelant sa méthode focus().

tabindex="5" : toute valeur tabindex supérieure à 0 place l'élément au début de l'ordre de tabulation naturel. S'il existe plusieurs éléments avec un tabindex supérieur à 0, l'ordre de tabulation commence par la valeur la plus basse supérieure à zéro et augmente progressivement.

C'est particulièrement vrai pour les éléments sans entrée, comme les en-têtes, les images ou les titres d'articles. Dans la mesure du possible, il est préférable d'organiser votre code source de sorte que la séquence DOM fournisse un ordre de tabulation logique. Si vous utilisez tabindex, limitez-le aux commandes interactives personnalisées telles que les boutons, les onglets, les listes déroulantes et les champs de texte, c'est-à-dire les éléments pour lesquels l'utilisateur peut s'attendre à fournir des informations.

N'ajoutez tabindex qu'aux contenus interactifs. Même si un contenu est important, comme une image clé, les utilisateurs de lecteurs d'écran peuvent le comprendre sans ajouter de focus.

Gérer la sélection au niveau de la page

Parfois, tabindex est nécessaire pour une expérience utilisateur fluide. Par exemple, si vous créez une page unique robuste avec différentes sections de contenu, où tout le contenu n'est pas visible simultanément. Par exemple, les liens de navigation peuvent modifier le contenu visible sans actualiser la page.

Dans ce cas, identifiez la zone de contenu sélectionnée, attribuez-lui une tabindex de -1 et appelez sa méthode focus. Cela garantit que le contenu n'apparaît pas dans l'ordre de tabulation naturel. Cette technique, appelée gestion de la sélection, permet de synchroniser le contexte perçu par l'utilisateur avec le contenu visuel du site.

Gérer la sélection dans les composants

Dans certains cas, vous devez également gérer la mise au point au niveau du contrôle, par exemple avec des composants personnalisés.

Par exemple, l'élément select peut recevoir une sélection de base, mais une fois sélectionné, vous pouvez utiliser les touches fléchées pour afficher d'autres options sélectionnables. Si vous créez un élément select personnalisé, il est important de reproduire ce comportement afin que les utilisateurs du clavier puissent toujours interagir avec votre commande.

Il peut être difficile de savoir quels comportements de clavier implémenter. Le guide ARIA Authoring Practices (Pratiques de création ARIA) liste les types de composants et les types d'actions au clavier qu'ils prennent en charge.

Vous travaillez peut-être sur des éléments personnalisés qui ressemblent à un ensemble de boutons radio, mais avec votre propre apparence et votre propre comportement.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Pour déterminer le type de clavier dont ils ont besoin, consultez le guide ARIA Authoring Practices. La section 2 contient une liste de modèles de conception, y compris un tableau des caractéristiques pour les groupes de boutons radio, le composant existant qui correspond le mieux à votre nouvel élément.

L'un des comportements courants du clavier qui doivent être pris en charge est celui des touches fléchées vers le haut, le bas, la gauche et la droite. Pour ajouter ce comportement au nouveau composant, nous utilisons une technique appelée roving tabindex.

L'index de tabulation itinérant fonctionne en définissant tabindex sur -1 pour tous les enfants, à l'exception de celui qui est actuellement actif.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Le composant utilise un écouteur d'événement de clavier pour déterminer la touche sur laquelle l'utilisateur appuie. Lorsque cela se produit, il définit la valeur tabindex de l'enfant précédemment sélectionné sur -1, définit la valeur tabindex de l'enfant à sélectionner sur 0 et appelle la méthode focus sur celui-ci.

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Lorsque l'utilisateur atteint le dernier (ou le premier, selon la direction dans laquelle il déplace la sélection) enfant, la sélection revient au premier (ou au dernier) enfant.

Essayez l'exemple suivant. Inspectez l'élément dans les outils de développement pour observer l'index de tabulation se déplacer d'une option radio à l'autre.

Modaux et pièges clavier

Il est préférable d'éviter de gérer manuellement la sélection, car cela peut entraîner des situations complexes. Par exemple, un widget de saisie semi-automatique qui tente de gérer la sélection et capture le comportement de l'onglet, mais empêche l'utilisateur de le quitter tant qu'il n'est pas terminé. C'est ce qu'on appelle un piège clavier, qui peut être très frustrant pour l'utilisateur.

La section 2.1.2 des WCAG stipule que la sélection au clavier ne doit jamais être bloquée ni piégée sur un élément de page particulier. L'utilisateur doit pouvoir accéder à tous les éléments de la page et en sortir en utilisant uniquement le clavier.

Les modaux font exception à cette règle. Toutefois, vous devez toujours éviter d'utiliser tabindex lorsque vous créez un modal. Avec inert, vous pouvez vous assurer que les utilisateurs ne peuvent pas interagir accidentellement avec un élément (piège clavier intentionnel). Utilisez l'élément <dialog>, qui est inerte par défaut, pour créer un modal pour les utilisateurs tout en bloquant les clics et les tabulations en dehors du modal. Cela permet à l'utilisateur de se concentrer sur une sélection requise.