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 via le clavier intégrés et doivent être utilisés autant que possible. Toutefois, si vous devez créer des éléments interactifs personnalisés, vous pouvez créer le comportement attendu de l'utilisateur en Ajout de tabindex.

N'ajoutez tabindex qu'à un contenu interactif. Même si le contenu est importante, comme une image clé, les utilisateurs de lecteurs d'écran peuvent la comprendre sans en ajoutant un focus.

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

Si vous devez modifier l'ordre de tabulation par défaut fourni par la vous pouvez utiliser l'attribut HTML tabindex pour définir explicitement la position de tabulation de l'élément.

tabindex peut être appliqué à n'importe quel élément, mais il ne doit être appliqué qu'aux éléments interactifs 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, puis supprimer des éléments dans l’ordre de tabulation. Exemple :

tabindex="0": insère un élément dans l'ordre de tabulation naturel. L'élément peut sélectionnons en appuyant sur Tabulation. Vous pouvez aussi sélectionner l'élément en appelant la méthode 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 index de tabulation supérieur à 0, l'ordre de tabulation commence à partir de la valeur la plus basse qui est supérieure à zéro et progresse vers le haut. L'utilisation d'un index de tabulation supérieur à 0 est considérée comme anti-modèle.

S'assurer que les commandes sont accessibles avec le clavier

Un outil comme Lighthouse est efficace pour détecter automatiquement certaines fonctionnalités d'accessibilité problèmes, mais certains tests doivent tout de même être effectués manuellement par un humain.

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 mise au point de ces commandes.

Gérer le curseur 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 efficace avec différentes sections de contenu, le contenu est masqué à différents moments du chargement de la page ; Cela peut signifier les liens de navigation modifient le contenu visible sans qu'une page soit actualisée.

Dans ce cas, identifiez la zone de contenu sélectionnée et attribuez-lui une valeur tabindex de -1 et 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 le focus dans les composants

Dans certains cas, vous devez également gérer le ciblage au niveau du groupe de contrôle, par exemple É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 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 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 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.

É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 un tabindex supérieur à 0, la tabulation ordre 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 anti-modèle, car les lecteurs d'écran parcourent la page dans l'ordre DOM, et non dans l'ordre de tabulation. Si vous avez besoin d'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 à l'aide d'un tabindex > 0. Exécutez la Audit d'accessibilité (Lighthouse > Options > Accessibility) et recherchez aux résultats du message "Aucun élément ne possède une valeur [tabindex] supérieure à 0" audit.

Utiliser "roving tabindex"

Si vous créez un composant complexe, vous devrez peut-être ajouter un clavier supplémentaire au-delà du focus. 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 connue en tant que "ronger tabindex". Pour changer la valeur de tabindex, définissez tabindex sur -1 pour tous les enfants sauf celui actif. Le composant utilise ensuite un clavier écouteur d'événements 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>

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.