Les commandes interactives peuvent être sélectionnables au clavier

Publié le 2 mai 2019

Vérifiez manuellement que tous les contrôles personnalisés peuvent être sélectionnés au clavier et qu'ils affichent un indicateur de sélection. L'ordre dans lequel les éléments sont sélectionnés doit correspondre à l'ordre DOM. Si vous ne savez pas quels éléments doivent être mis en évidence, consultez le module sur la mise au point du cours sur l'accessibilité sur web.dev.

Effectuer un test manuel

Pour vérifier que le contrôle personnalisé est sélectionnable et qu'il affiche un indicateur de sélection, commencez par parcourir votre site à l'aide de la touche de tabulation. Utilisez TAB (ou SHIFT + TAB) pour passer d'un contrôle à l'autre, et les touches fléchées, ENTER et SPACE pour modifier leurs valeurs (voir aussi Principes de base de l'accès au clavier) :

Pouvez-vous accéder à tous les contrôles interactifs de la page ? Un indicateur de sélection est-il présent sur chaque élément interactif ?

Solution

Si vous ne parvenez pas à parcourir tous les éléments d'une page à l'aide de la touche de tabulation, vous devrez peut-être utiliser tabindex pour améliorer la possibilité de sélectionner ces commandes.

Pour rendre un contrôle personnalisé sélectionnable, insérez l'élément de contrôle personnalisé dans l'ordre de tabulation naturel à l'aide de tabindex="0" (voir également Contrôler la sélection avec tabindex). Exemple :

<div tabindex="0">Focus me with the TAB key</div>

Vous devrez peut-être également ajouter les rôles ARIA appropriés aux éléments de contrôle personnalisés. Consultez Les commandes personnalisées ont des rôles ARIA.

Si vous ne voyez pas d'indicateur de sélection, envisagez d'utiliser :focus pour toujours afficher un indicateur de sélection. Que vous utilisiez une souris ou un clavier pour y accéder, l'indicateur de focus du bouton est toujours le même (voir aussi Style focus).

Explication

Pour les utilisateurs qui ne peuvent pas ou ne souhaitent pas utiliser de souris, la navigation au clavier est le principal moyen d'accéder à tout ce qui se trouve à l'écran. Pour une bonne expérience au clavier, il faut un ordre de tabulation logique et des styles de focus discernables. Si un utilisateur au clavier ne peut pas voir ou savoir ce qui est sélectionné, il n'a aucun moyen d'interagir avec la page.

Pour en savoir plus sur l'accessibilité, consultez Learn Accessibility.

Ressources