Contrôler le curseur à l'aide de la touche Tabindex

Rob Dodson

Alexandra Klepper

Les éléments HTML standards tels que <button> ou <input> sont accessibles au clavier par défaut et doivent être utilisés chaque fois que possible. Toutefois, si vous devez créer des éléments interactifs personnalisés, vous pouvez créer le comportement utilisateur attendu en ajoutant tabindex.

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.

Qu'est-ce que tabindex ?

Si vous devez modifier l'ordre de tabulation par défaut fourni par les éléments intégrés, 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, mais uniquement aux éléments interactifs. 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. L'utilisation d'un tabindex supérieur à 0 est considérée comme un antimodèle.

S'assurer que les commandes sont accessibles au clavier

Un outil comme Lighthouse est idéal pour détecter automatiquement certains problèmes d'accessibilité. Toutefois, certains tests doivent encore être effectués manuellement par un humain.

Essayez d'appuyer sur la touche Tab pour parcourir votre site. Pouvez-vous accéder à toutes les commandes interactives de la page ? Si ce n'est pas le cas, vous devrez peut-être utiliser tabindex pour améliorer la possibilité de sélectionner ces commandes.

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

Parfois, tabindex permet de créer une expérience utilisateur fluide. Par exemple, si vous créez une page unique robuste avec différentes sections de contenu, où certains contenus sont masqués à différents moments du chargement de la page. 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 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 les éléments personnalisés.

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.

Insérer un élément dans l'ordre de tabulation

Insérez un élément dans l'ordre de tabulation naturel à l'aide de tabindex="0". Exemple :

<div tabindex="0">Focus me with the TAB key</div>

Pour sélectionner un élément, appuyez sur la touche Tab ou appelez la méthode focus() de l'élément.

Supprimer un élément de l'ordre de tabulation

Supprimez un élément à l'aide de tabindex="-1". Exemple :

<button tabindex="-1">Can't reach me with the TAB key!</button>

Cela 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().

L'application de tabindex="-1" à un élément n'affecte pas ses enfants. S'ils sont dans l'ordre de tabulation naturellement ou en raison d'une valeur tabindex, ils y resteront. Pour supprimer un élément et tous ses enfants de l'ordre de tabulation, envisagez d'utiliser le polyfill inert du WICG. Le polyfill émule le comportement d'un attribut inert proposé, qui empêche les technologies d'assistance de sélectionner ou de lire les éléments.

Éviter la requête tabindex > 0

Toute valeur tabindex supérieure à 0 fait passer l'élément au début de l'ordre de tabulation naturel. S'il existe plusieurs éléments avec une valeur tabindex supérieure à 0, l'ordre de tabulation commence par la valeur la plus basse supérieure à zéro et augmente progressivement.

L'utilisation d'un tabindex supérieur à 0 est considérée comme un anti-pattern, car les lecteurs d'écran parcourent la page dans l'ordre du DOM, et non dans l'ordre de tabulation. Si vous avez besoin qu'un élément apparaisse plus tôt dans l'ordre de tabulation, il doit être déplacé vers un emplacement antérieur dans le DOM.

Avec Lighthouse, vous pouvez identifier les éléments dont le tabindex est supérieur à 0. Exécutez l'audit d'accessibilité (Lighthouse > Options > Accessibilité), puis recherchez les résultats de l'audit "Aucun élément n'a de valeur [tabindex] supérieure à 0".

Utiliser "tabindex mobile"

Si vous créez un composant complexe, vous devrez peut-être ajouter une prise en charge du clavier supplémentaire au-delà de la mise au point. Si possible, utilisez l'élément select intégré. Il est sélectionnable et permet d'afficher d'autres options sélectionnables à l'aide des touches fléchées.

Pour implémenter des fonctions similaires dans vos propres composants, vous pouvez utiliser une technique appelée "tabindex itinérant". Le tabindex itinérant fonctionne en définissant tabindex sur -1 pour tous les enfants, à l'exception de celui qui est actuellement actif. Le composant utilise ensuite un écouteur d'événements clavier pour déterminer la touche sur laquelle l'utilisateur a appuyé.

Dans ce cas, le composant 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.

Avant

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

Après

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

Recettes d'accès au clavier

Si vous ne savez pas quel niveau de compatibilité avec le clavier vos composants personnalisés peuvent nécessiter, vous pouvez consulter les ARIA Authoring Practices 1.1. Ce guide liste les modèles d'UI courants et identifie les touches que vos composants doivent prendre en charge.