Vérifiez manuellement que toutes les commandes personnalisées peuvent être sélectionnables au clavier et qu'elles affichent un indicateur de mise au point. L'ordre dans lequel les éléments sont sélectionnés doit suivre l'ordre du DOM. Si vous ne savez pas quels éléments doivent être ciblés, consultez la section Présentation du focus.
Tester manuellement
Pour vérifier que la commande personnalisée peut être sélectionnée et qu'elle affiche un indicateur de focus, commencez par parcourir votre site à l'aide de la touche de tabulation.
Utilisez TAB (ou SHIFT +
TAB) pour passer d'une commande à l'autre, et utilisez les touches fléchées, et ENTER et SPACE pour manipuler leurs valeurs (voir aussi Principes de base de l'accès au clavier):
Pouvez-vous accéder à toutes les commandes interactives de la page ? Un indicateur de mise au point est-il associé à chaque commande interactive ?
Solutions
Si vous ne parvenez pas à parcourir tous les éléments d'une page avec la touche de tabulation, vous devrez peut-être utiliser tabindex pour améliorer la sélection de ces commandes.
Pour rendre une commande personnalisée sélectionnable, insérez l'élément de commande personnalisé dans l'ordre de tabulation naturel à l'aide de tabindex="0" (voir aussi Contrôler le curseur à l'aide d'un index de tabulation).
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 disposent de rôles ARIA.
Si aucun indicateur de mise au point ne s'affiche, vous pouvez utiliser :focus pour toujours afficher un indicateur de mise au point.
Que vous utilisiez une souris ou un clavier pour y accéder à l'aide de la touche de tabulation, l'indicateur de mise au point du bouton a toujours la même apparence (voir également Sélection du style).
Utilité
Pour les utilisateurs qui ne peuvent pas ou choisissent de ne pas utiliser la souris, la navigation au clavier est le principal moyen d'atteindre tous les éléments d'un écran. Pour que votre clavier fonctionne comme prévu, vous devez suivre un ordre de tabulation logique et des styles de mise au point faciles à distinguer. Si un utilisateur de clavier ne voit pas les éléments sélectionnés, il n'a aucun moyen d'interagir avec la page.
Pour en savoir plus, consultez Effectuer un examen de l'accessibilité.