Les commandes interactives personnalisées doivent pouvoir être sélectionnées. Par exemple, si vous utilisez JavaScript pour transformer un <div> en menu déroulant sophistiqué, ce menu déroulant n'est pas automatiquement inséré dans le bon ordre des onglets.
Vous devez vérifier manuellement que toutes les commandes personnalisées peuvent être mises en surbrillance au clavier.
Si possible, utilisez des éléments HTML sémantiques qui permettent l'interaction.
Comment effectuer un test
Pour vérifier que la commande personnalisée peut être sélectionnée, appuyez sur la touche TAB pour naviguer sur le site:
Avez-vous accès à 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.
Consultez également Contrôler le focus avec tabindex.
Solution
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".
Exemple :
<div tabindex="0">Focus me with the TAB key</div>
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 du clavier ne peut pas voir ce qui est sélectionné, il ne peut pas interagir avec la page.
Si vous débutez dans les tests d'accessibilité, nous vous recommandons de vous renseigner sur les tests d'accessibilité manuels et les tests des technologies d'assistance.