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 dotés d'une accessibilité au clavier intégrée et doivent être utilisés dans la mesure du possible. Toutefois, si vous devez créer des éléments interactifs personnalisés, vous pouvez créer le comportement attendu de l'utilisateur en ajoutant tabindex.

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 ajouter de focus.

Qu'est-ce que l'index de tabulation ?

Si vous devez modifier l'ordre des onglets par défaut fourni par les éléments intégrés, vous pouvez utiliser l'attribut HTML tabindex pour définir explicitement la position d'un élément dans l'onglet.

tabindex peut être appliqué à n'importe quel élément, mais ne doit être appliqué qu'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 ê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 de tabulation naturel, mais peut toujours être sélectionné 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 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 tabindex supérieur à 0 est considérée comme un antimodèle.

Assurez-vous que les commandes sont accessibles depuis le clavier

Un outil tel que Lighthouse est très efficace pour détecter automatiquement certains problèmes d'accessibilité. Toutefois, certains tests doivent toujours ê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 sélection de 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 et attribuez-lui une tabindex de -1, puis 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 focus, synchronise 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 le ciblage au niveau de la commande, par exemple avec les éléments personnalisés.

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.

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

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 naturel des onglets, mais l'élément peut toujours être mis au premier plan en appelant sa méthode focus().

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

Éviter la requête tabindex > 0

Toute valeur tabindex supérieure à 0 fait passer l'élément en tête de l'ordre naturel des onglets. Si plusieurs éléments ont une valeur tabindex supérieure à 0, l'ordre des onglets commence par la valeur la plus basse supérieure à zéro et augmente.

L'utilisation d'une valeur tabindex supérieure à 0 est considérée comme un anti-modèle, car les lecteurs d'écran parcourent la page dans l'ordre DOM, et non dans l'ordre des onglets. Si vous souhaitez qu'un élément apparaisse plus tôt dans l'ordre de tabulation, vous devez le déplacer vers un emplacement antérieur du DOM.

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

Utiliser "tabindex itinérant"

Si vous créez un composant complexe, vous devrez peut-être ajouter une prise en charge du clavier supplémentaire. Si possible, utilisez l'élément select intégré. Il peut être sélectionné et permet aux touches fléchées d'afficher des options supplémentaires sélectionnables.

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

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

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 Pratiques d'écriture ARIA 1.1. Ce guide répertorie les modèles d'UI courants et identifie les touches que vos composants doivent prendre en charge.