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 fonctionnalité d'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 utilisateur attendu en ajoutant tabindex.

Navigateurs pris en charge

• 1 fois
• 12
• 1.5
• 3,1

Source

Conseil :Pour en savoir plus sur la sélection au clavier, reportez-vous aux Découvrir le cours sur l'accessibilité

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

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

Qu'est-ce que l'attribut tabindex ?

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 l'élément peut toujours être sélectionné en appelant sa méthode focus()

tabindex="5": tout index de tabulation supérieur à 0 met cet élément au premier plan. de l'ordre de tabulation naturel. 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. L'utilisation d'un index de tabulation supérieur à 0 est considérée comme anti-modè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.

Conseil :Découvrez les fonctionnalités automatisées et des tests d'accessibilité manuels dans Découvrir l'accessibilité

Essayez d'appuyer sur la touche Tab pour parcourir votre site. Parvenez-vous à 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 aucun indicateur de focus ne s'affiche, il est possible qu'il soit masqué par votre CSS. Chèque pour :focus { outline: none; }. Pour résoudre ce problème, consultez notre guide ciblage stylistique.

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 actualisation de 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 l'ordre de tabulation naturel. Cette technique, appelée gestion du ciblage, permet de conserver Le contexte perçu de l'utilisateur est en phase 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 de la commande, par exemple avec les éléments personnalisés.

Il peut être difficile de savoir quels comportements de clavier implémenter. La Création ARIA (Accessible Rich Internet Applications) Pratiques répertorie les types de composants et les types d'actions du 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 mettre en surbrillance 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 de tabulation naturel, mais il peut toujours être sélectionné en appelant sa méthode focus().

L'application de tabindex="-1" à un élément n'a aucune incidence sur ses enfants. si elles sont dans l'ordre de tabulation naturellement ou en raison d'une valeur tabindex, elles restent dans l'ordre de tabulation. 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é, ce qui empêche les éléments d'être sélectionnés ou lus par les technologies d'assistance.

Attention : Le polyfill inert est expérimental et peut ne pas fonctionner comme prévu dans tous les cas. Testez attentivement avant de l'utiliser en production.

Éviter la requête tabindex > 0

Toute valeur tabindex supérieure à 0 place l'élément au début de l'onglet naturel commande. 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 naviguent sur la page dans l'ordre DOM, et non dans l'ordre des onglets. Si vous avez besoin qu'un élément apparaisse plus tôt dans l'ordre des onglets, vous devez le déplacer vers un emplacement antérieur dans le DOM.

Avec Lighthouse, vous pouvez identifier les éléments à l'aide d'un tabindex > 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 "roving tabindex"

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

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 l'élément tabindex de l'élément enfant précédemment sélectionné. sur -1, définit l'élément tabindex de l'enfant à cibler sur 0 et appelle 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>

Remarque : Les attributs role="" 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 ne savez pas quel niveau de compatibilité du clavier vos composants personnalisés vous pouvez consulter Pratiques de création ARIA 1.1 Ce guide répertorie les modèles d'interface utilisateur courants et identifie les touches doit prendre en charge.