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.
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.
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.
É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>
À FAIRE: Site DevSite – Évaluation Think and Check
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.