Les commandes interactives peuvent être sélectionnables au clavier

Vérifiez manuellement que toutes les commandes personnalisées peuvent être sélectionnées au clavier et qu'elles affichent un indicateur de sélection. L'ordre dans lequel les éléments sont mis au point doit suivre l'ordre DOM. Si vous ne savez pas quels éléments doivent être mis en surbrillance, consultez le module sur la sélection du cours "Apprendre l'accessibilité" sur web.dev.

Effectuer un test manuel

Pour vérifier que le contrôle personnalisé peut être sélectionné et qu'il affiche un indicateur de sélection, commencez par parcourir votre site à l'aide de la touche Tabulation. Utilisez TAB (ou SHIFT + TAB) pour passer d'une commande à l'autre, et les touches fléchées, ainsi que ENTER et SPACE pour manipuler leurs valeurs (voir également la section Principes de base de l'accès au clavier):

Avez-vous accès à toutes les commandes interactives de la page ? Existe-t-il un indicateur de focus sur chaque commande interactive ?

Solution

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

Pour rendre une commande personnalisée centrée, insérez l'élément de commande personnalisée dans l'ordre naturel des onglets à l'aide de tabindex="0" (voir également la section 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 aucun indicateur de mise au point ne s'affiche, utilisez :focus pour qu'il s'affiche toujours. Que vous utilisiez une souris ou un clavier pour y accéder, l'indicateur de sélection du bouton est toujours le même (voir également Style de sélection).

Utilité

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

Pour en savoir plus, consultez Effectuer un examen de l'accessibilité.

Ressources