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 vous devrez peut-être parfois modifier l'ordre de tabulation. Déplacer des éléments dans le code HTML est idéal, mais cela peut ne pas être 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 qu'il ne soit pas nécessairement utile pour tous les éléments. Il prend 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 être sélectionné dans l'ordre des onglets et supprimer des éléments de l'ordre des onglets. Exemple :

tabindex="0" : insère un élément dans l'ordre naturel des onglets. Vous pouvez mettre en surbrillance l'élément en appuyant sur la touche Tab, ou en appelant sa méthode focus().

tabindex="-1" : supprime un élément de l'ordre naturel des onglets, mais l'élément peut toujours être mis au point en appelant sa méthode focus().

tabindex="5" : tout tabindex supérieur à 0 place cet élément au premier plan de l'ordre naturel des onglets. Si plusieurs éléments ont un tabindex supérieur à 0, l'ordre des tabulations commence par la valeur la plus basse supérieure à zéro et augmente.

Cela est particulièrement vrai pour les éléments qui ne sont pas des entrées, tels que les en-têtes, les images ou les titres d'article. 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-la 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 auxquels l'utilisateur peut s'attendre à fournir des entrées.

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

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, dont tous les contenus ne sont pas visibles simultanément. Cela peut signifier que les liens de navigation modifient le contenu visible, sans actualisation de la page.

Dans ce cas, identifiez la zone de contenu sélectionnée, attribuez-lui la valeur tabindex -1 et appelez sa méthode focus. Cela garantit que le contenu n'apparaît pas dans l'ordre naturel des onglets. Cette technique, appelée gestion du ciblage, permet de synchroniser le contexte perçu de 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 sélection 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 que vous y êtes, vous pouvez utiliser les touches fléchées pour afficher des options sélectionnables supplémentaires. Si vous créez un élément select personnalisé, il est important de reproduire ce comportement afin que les utilisateurs de clavier puissent toujours interagir avec votre commande.

Il peut être difficile de savoir quels comportements de clavier implémenter. Le guide Pratiques d'écriture pour les applications Web accessibles (ARIA) liste les types de composants et les types d'actions de clavier qu'ils acceptent.

Vous travaillez peut-être sur des éléments personnalisés qui ressemblent à un ensemble de boutons radio, mais avec votre propre approche de l'apparence et du 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 les fonctionnalités de clavier dont ils ont besoin, consultez le guide des pratiques d'écriture ARIA. La section 2 contient une liste de modèles de conception, y compris une table des caractéristiques pour les groupes d'options, le composant existant qui correspond le mieux à votre nouvel élément.

L'un des comportements courants du clavier qui doit être pris en charge est les touches fléchées vers le haut/le bas/la gauche/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 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énements de clavier pour déterminer la touche sur laquelle l'utilisateur appuie. Dans ce cas, il définit le tabindex de l'enfant précédemment sélectionné sur -1, définit le tabindex de l'enfant à sélectionner sur 0 et appelle la méthode de sélection.

<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, le focus revient au premier (ou dernier) enfant.

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

Modales et pièges du clavier

Il est préférable d'éviter de gérer manuellement la sélection, car cela peut entraîner des situations compliquées. 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'a pas terminé. C'est ce qu'on appelle un piège à clavier, et cela peut être très frustrant pour l'utilisateur.

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

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