Les commandes interactives personnalisées doivent pouvoir être sélectionnables.
Si vous utilisez JavaScript pour transformer un <div> en un menu déroulant sophistiqué, il ne sera pas automatiquement inséré dans l'ordre de tabulation.
Vous devez vérifier manuellement que toutes les commandes personnalisées peuvent être sélectionnables au clavier.
Consultez également Principes de base de l'accès au clavier.
Tester manuellement
Pour vérifier que la commande personnalisée peut être sélectionnée, appuyez sur la touche TAB pour parcourir le site:
Pouvez-vous accéder à 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 curseur à l'aide de la touche tabindex.
Solutions
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".
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 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é.