Les éléments HTML standards tels que <button> ou <input> intègrent l'accessibilité du clavier 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'à un contenu interactif. Même si le contenu est important, comme une image clé, les utilisateurs de lecteurs d'écran peuvent le comprendre sans le mettre en avant.
Qu'est-ce que l'index de tabulation ?
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 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 et supprimer des éléments de l'ordre de tabulation. Exemple :
tabindex="0": insère un élément dans l'ordre de tabulation naturel. Vous pouvez sélectionner l'élément en appuyant sur Tabulation, et inversement 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": toute tabulation supérieure à 0 met cet élément en premier dans 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 supérieure à zéro et progresse. L'utilisation d'un index de tabulation supérieur à 0 est considérée comme un anti-modèle.
S'assurer que les commandes sont accessibles avec le clavier
Un outil tel que Lighthouse est très efficace pour détecter automatiquement certains problèmes d'accessibilité. Toutefois, certains tests doivent tout de même être effectués manuellement par une personne.
Essayez d'appuyer sur la touche Tab pour parcourir votre site. Pouvez-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.
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 robuste avec différentes sections de contenu, où une partie du contenu est caché à 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 la valeur tabindex -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 du ciblage, permet de synchroniser le contexte perçu de l'utilisateur 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 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 Accessible Rich Internet Applications (ARIA) Authoring Practices (Pratiques de création ARIA) répertorie les types de composants et les types d'actions du clavier compatibles.
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>
Cette opération 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'affecte pas ses enfants. S'ils se trouvent naturellement dans l'ordre de tabulation ou en raison 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 technologies d'assistance de sélectionner ou de lire des éléments.
Éviter la requête tabindex > 0
Toute valeur tabindex supérieure à 0 place l'élément au début de l'ordre de tabulation naturel. Si plusieurs éléments ont un tabindex supérieur à 0, l'ordre de tabulation commence à partir de la valeur la plus basse supérieure à zéro et progresse vers le haut.
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 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.
Avec Lighthouse, vous pouvez identifier les éléments dont le champ tabindex est supérieur à 0. Exécutez l'audit d'accessibilité (Lighthouse > Options > Accessibility) 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 du clavier supplémentaire. Si possible, utilisez l'élément select intégré. Il est sélectionnable 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 connue sous le nom de "roving tabindex". La rotation de la tabulation 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'tabindex de l'enfant précédemment sélectionné sur -1, définit l'tabindex de l'enfant à sélectionner sur 0 et appelle la méthode focus() sur 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>
Recettes d'accès au clavier
Si vous ne savez pas quel niveau de compatibilité avec le clavier vos composants personnalisés pourraient nécessiter, vous pouvez consulter la page ARIA Authoring Practices 1.1. Ce guide répertorie les modèles d'interface utilisateur courants et identifie les clés que vos composants doivent accepter.