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

Rob Dodson

L'accessibilité via le clavier est sans frais pour les éléments HTML standards tels que <button> ou <input>. Toutefois, si vous créez des composants interactifs personnalisés, utilisez l'attribut tabindex pour vous assurer qu'ils sont accessibles via le clavier.

Remarque : Dans la mesure du possible, utilisez un élément HTML intégré au lieu de créer votre propre version personnalisée. <button>, par exemple, est très facile à styliser et est déjà entièrement compatible avec le clavier. Cela vous évite d'avoir à gérer tabindex ou à ajouter une sémantique avec ARIA.

Vérifier si les commandes sont accessibles via le clavier

Un outil comme Lighthouse est idéal pour détecter certains problèmes d'accessibilité, mais certaines choses ne peuvent être testées que par un être humain.

Essayez d'appuyer sur la touche Tab pour parcourir votre site. Êtes-vous en mesure d'atteindre 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.

Avertissement : Si vous ne voyez aucun indicateur de focus, votre CSS peut le masquer. Recherchez tous les styles qui mentionnent :focus { outline: none; }. Pour résoudre ce problème, consultez notre guide sur le style du focus.

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 avec 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 il peut toujours être sélectionné en appelant sa méthode focus().

Notez que l'application de tabindex="-1" à un élément n'affecte pas ses enfants. S'ils se trouvent dans l'ordre de tabulation naturellement ou à cause d'une valeur tabindex, ils restent dans l'ordre de tabulation. Pour supprimer un élément et tous ses enfants de l'ordre de tabulation, envisagez d'utiliser le polyfill inert de WICG. Le polyfill émule le comportement d'un attribut inert proposé, qui empêche les éléments d'être sélectionnés ou lus par des technologies d'assistance.

Attention : Le polyfill inert est expérimental et risque de ne pas fonctionner comme prévu dans tous les cas. Faites attention à tout test avant de l'utiliser en production.

Éviter la requête tabindex > 0

Toute valeur tabindex supérieure à 0 place l'élément au premier plan de l'ordre de tabulation naturel. S'il existe plusieurs éléments avec une valeur tabindex supérieure à 0, l'ordre de tabulation commence à partir de la valeur la plus basse (supérieure à zéro) et remonte.

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 de tabulation. 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 dans le DOM.

Lighthouse permet d'identifier facilement les éléments dont la valeur tabindex est supérieure à 0. Exécutez l'audit d'accessibilité (Lighthouse > Options > Accessibility) et recherchez les résultats de l'audit "Aucun élément ne possède une valeur [tabindex] supérieure à 0".

Créer des composants accessibles avec une "tabindex" approuvée

Si vous créez un composant complexe, vous devrez peut-être ajouter une compatibilité de clavier supplémentaire au-delà de la sélection. Prenons l'exemple de l'élément select intégré. Elle est sélectionnable et vous pouvez utiliser les touches fléchées pour afficher des fonctionnalités supplémentaires (les options sélectionnables).

Pour implémenter une fonctionnalité similaire dans vos propres composants, utilisez une technique connue sous le nom de "tabindex". Le tabindex 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'élément enfant précédemment sélectionné sur -1, définit le tabindex de l'élément enfant à sélectionner sur 0 et appelle la méthode focus() pour cet élément.

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>

Remarque : Vous aimeriez savoir à quoi servent ces attributs role="" ? Ils vous permettent de modifier la sémantique d'un élément afin qu'il soit annoncé correctement par un lecteur d'écran. Pour en savoir plus, consultez notre guide sur les principes de base des lecteurs d'écran.

Recettes d'accès au clavier

Si vous n'êtes pas sûr du niveau de compatibilité du clavier dont vos composants personnalisés pourraient avoir besoin, vous pouvez consulter les pratiques de création ARIA 1.1. Ce guide pratique liste les modèles d'interface utilisateur courants et identifie les clés que vos composants doivent prendre en charge.