Quand une infobulle ou un panneau qui apparaît au survol contient des liens cliquables, ces liens sont-ils aussi accessibles au clavier ?
Critère officiel 12.11 — Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier ?
Pourquoi c'est important
Si une infobulle contient un lien « En savoir plus », un utilisateur au clavier doit pouvoir y entrer pour l'activer. Si l'infobulle disparaît dès que le focus tente d'y entrer, le lien n'est jamais atteignable — la fonctionnalité est réservée aux utilisateurs de souris.
Exemples concrets
Ce qui est conforme
L'infobulle d'aide d'un formulaire de demande contient un lien « Consulter le guide complet ». En naviguant au clavier, l'utilisateur peut entrer dans l'infobulle, atteindre ce lien et l'activer — l'infobulle reste ouverte le temps d'y naviguer.
Ce qui pose problème
La même infobulle disparaît immédiatement dès que le focus quitte le bouton « Aide » pour tenter d'atteindre le lien à l'intérieur. Le lien n'est jamais atteignable au clavier — la souris est obligatoire pour le cliquer.
Comment agir
Pour tout contenu additionnel (infobulle, tooltip, panneau) qui contient des liens ou des boutons, demandez à votre prestataire de s'assurer que ce contenu reste visible et atteignable au clavier. Ce critère est la déclinaison clavier du critère 10.13 (contrôle au survol) — les deux font partie du même système de navigation cohérente.
Règles clés
- Mêmes exigences que 10.13 et 10.14.
- La zone de hover doit couvrir le déclencheur ET le sous-menu.
- Le sous-menu doit être accessible au clavier (:focus-within ou JS).
- Préférer le pattern Disclosure Navigation (APG) aux sous-menus CSS purs.
Erreurs fréquentes
- Sous-menus CSS disparaissant dès que le pointeur quitte le lien déclencheur
- Mega menus se fermant au moindre déplacement hors de la zone
- Sous-menus non accessibles au focus clavier
Exemples de code
sous-menu CSS disparaissant
✗ Non conformenav li:hover > ul { display: block; }
/* Si espace entre <li> et <ul> :
le sous-menu disparaît au passage */Espace non couvert entre déclencheur et sous-menu — disparaît avant d'être atteint.
sous-menu avec zone continue et focus
✓ Conformenav li { position: relative; }
nav li:hover > ul,
nav li:focus-within > ul {
display: block;
}
nav li > ul {
position: absolute;
top: 100%; left: 0;
/* Collé au li — pas d'espace */
}
/* :focus-within = accessible au clavier.
Échap à implémenter en JS pour conformité complète */Pas d'espace entre déclencheur et sous-menu. :focus-within rend accessible au clavier. Solution partielle — Échap nécessite du JS.
Référence WCAG : 2.1.1