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 n'est pas toujours réalisable. 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 à tous les éléments et accepte une plage de valeurs entières. Avec tabindex, vous pouvez spécifier un ordre explicite pour les éléments de la page sélectionnables, insérer un élément non sélectionnable 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. Vous pouvez sélectionner l'élément en appuyant sur Tabulation, et inversement en appelant sa méthode focus().
tabindex="-1": supprime un élément de l'ordre de tabulation naturel, mais peut toujours être sélectionné en appelant sa méthode focus().
tabindex="5": toute tabulation supérieure à 0 met cet élément en premier dans l'ordre de tabulation naturel. Si plusieurs éléments ont un index de tabulation supérieur à 0, l'ordre de tabulation commence à partir de la valeur la plus basse supérieure à zéro et progresse. L'utilisation d'un index de tabulation supérieur à 0 est considérée comme un anti-modèle.
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. Lorsque cela est 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'à un contenu interactif. 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 le curseur au niveau de la page
tabindex est parfois nécessaire pour une expérience utilisateur fluide. C'est le cas, par exemple, si vous créez une page unique robuste avec différentes sections de contenu, dans laquelle tout le contenu n'est pas visible en même temps. Cela peut signifier que les liens de navigation modifient le contenu visible sans actualiser 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 de tabulation naturel. 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 le focus dans les composants
Dans certains cas, vous devez également gérer le ciblage au niveau du contrôle, comme avec les composants personnalisés.
Par exemple, l'élément select peut recevoir le focus de base, mais vous pouvez ensuite utiliser les touches fléchées pour afficher des options supplémentaires sélectionnables.
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 Accessible Rich Internet Applications (ARIA) Authoring Practices (Pratiques de création ARIA) répertorie les types de composants et les types d'actions du clavier compatibles.
Peut-être travaillez-vous sur des éléments personnalisés qui ressemblent à un ensemble de cases d'option, mais avec une approche unique 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 la compatibilité du clavier dont ils ont besoin, consultez le guide des pratiques de création 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.
Les touches fléchées haut/bas/gauche/droite sont l'un des comportements de clavier courants qui devraient être pris en charge. Pour ajouter ce comportement au nouveau composant, nous utilisons une technique appelée tablette temporaire.
La rotation de la tabulation 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. Lorsque cela se produit, il définit l'tabindex de l'enfant précédemment sélectionné sur -1, définit l'tabindex de l'enfant à sélectionner sur 0 et appelle la méthode de mise au point dessus.
<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 le curseur), le focus revient au premier (ou dernier) enfant.
Essayez l'exemple suivant. Inspectez l'élément dans les outils de développement pour observer le passage de l'index de tabulation d'une radio à l'autre.
Modales et pièges du clavier
Évitez de vous concentrer manuellement, car cela peut entraîner des situations compliquées. Par exemple, un widget de saisie semi-automatique qui tente de gérer le focus et capture le comportement de l'onglet, mais qui empêche l'utilisateur de le quitter tant que l'opération n'est pas terminée. C'est ce qu'on appelle un piège du clavier, qui 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 naviguer entre les différents éléments de la page à l'aide du clavier uniquement.
Les modales 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 (un piège clavier intentionnel). Utilisez l'élément <dialog>, qui est inerte par défaut, afin de créer une modale pour les utilisateurs tout en bloquant les clics et les onglets en dehors de celle-ci. Cela permet à l'utilisateur de se concentrer sur une sélection obligatoire.