Est-ce la bonne façon d'afficher une info-bulle sur la navigation au clavier?
Gmail affiche une info-bulle sur la navigation au clavier. Ma question est de savoir si l'info-bulle peut être affichée sur la navigation au clavier?
La réponse est oui . Vous devez offrir une expérience aussi similaire que possible aux utilisateurs, indépendamment de la façon dont ils visitent votre site. Voici une citation de Google Material spécifiquement sur informations d'accessibilité et de survol :
Les interfaces clavier/souris doivent avoir toutes les tâches et toutes les informations de survol accessibles par clavier uniquement.
Comme le dit @SteveD dans les commentaires, c'est également une exigence dans "WCAG 2.0 sous 2.1 Accessible au clavier":
Lorsque toutes les fonctionnalités du contenu peuvent être exploitées via un clavier ou une interface de clavier, elles peuvent être utilisées par ceux qui n'ont pas de vision ainsi que par ceux qui doivent utiliser d'autres claviers ou périphériques d'entrée qui agissent comme des émulateurs de clavier comme un logiciel d'entrée vocale ou à l'écran. claviers.
Pour l'accessibilité, votre système/produit doit être capable d'afficher des info-bulles pour les utilisateurs de la souris et du clavier.
Si vous demandez comment pour le faire fonctionner (ce que vous devriez vraiment demander sur Stack Overflow et pas ici), alors la pseudo-classe: focus en CSS et JQuery est ce que vous voulez rechercher .
L'expérience la plus impressionnante concernant les info-bulles que j'ai eues en tant qu'utilisateur intensif de clavier a été lorsque je suis récemment tombé sur processus de demande ESTA .
Je n'aime pas utiliser une souris, et je forcerai mon chemin à travers les formulaires à peu près à n'importe quel prix. Cependant, j'ai été agréablement surpris lorsque j'ai découvert que le bouton d'info-bulle attaché à chaque entrée de formulaire avait détourné un incrément de la propriété tabindex .
En conséquence, la première touche Tab s'est concentrée et a ouvert l'info-bulle, tandis que ma deuxième touche Tab s'est concentrée sur l'entrée de formulaire réelle. Cela signifie qu'il a effectivement fallu deux pressions sur les onglets pour passer à la saisie de formulaire suivante - cependant, le temps supplémentaire qu'il m'a fallu pour appuyer deux fois sur la touche Tab au lieu d'une fois, a incontestablement été un gain de temps sans avoir à atteindre la souris et à survoler l'info-bulle. bouton.
Dans l'ensemble, une implémentation étonnamment impressionnante - et accessible en ce qu'elle est conforme à la --- (directive WCAG 2. ). Surtout étant donné que le processus de demande ESTA implique de nombreuses entrées de formulaire où l'utilisateur (souvent étranger comme moi) a pour l'expliquer par l'info-bulle.
(Désolé pour la pomme de terre gif - la capture d'écran n'est pas mon atout le plus fort.)