Les menus et contenus qui n'apparaissent qu'au survol de la souris sont-ils aussi accessibles au clavier ?
Critère officiel 10.14 — Dans chaque page web, les contenus additionnels apparaissant via les styles CSS uniquement peuvent-ils être rendus visibles au clavier et par tout dispositif de pointage ?
Pourquoi c'est important
Une personne qui navigue exclusivement au clavier ne peut pas « survoler » un élément avec la souris. Si un sous-menu ou un contenu n'apparaît que lors du passage de la souris, il est totalement inaccessible au clavier — et donc inaccessible à toute personne qui ne peut pas utiliser une souris.
Exemples concrets
Ce qui est conforme
Le menu de navigation principal ouvre ses sous-menus aussi bien au survol souris qu'à la prise de focus clavier (touche Tab). Un utilisateur naviguant au clavier peut atteindre toutes les rubriques et sous-rubriques sans jamais toucher la souris.
Ce qui pose problème
Les sous-menus du menu principal n'apparaissent qu'au survol de la souris. En naviguant au clavier, ces sous-menus n'apparaissent jamais. Les pages de second niveau sont totalement invisibles et inaccessibles pour les utilisateurs au clavier.
Comment agir
Test autonome : naviguez dans le menu principal avec la touche Tab. Les sous-menus doivent apparaître à la prise de focus exactement comme ils apparaissent au survol de la souris. Si les sous-menus restent invisibles, signalez ce défaut à votre prestataire.
Règles clés
- Mêmes exigences que 10.13 : masquable (Échap), survolable, persistant.
- Un tooltip CSS pur ne peut pas répondre à Échap — privilégier une implémentation JavaScript.
- En pratique : les tooltips CSS doivent être remplacés par des implémentations JS pour conformité complète.
Erreurs fréquentes
- Tooltip CSS qui disparaît dès que le pointeur sort de l'élément déclencheur
- Tooltip CSS non accessible au focus clavier
- Infobulle CSS sans fermeture possible par Échap (impossible en CSS pur)
Exemples de code
tooltip CSS disparaissant
✗ Non conforme.btn:hover::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
}
/* Si le pointeur se déplace vers le tooltip,
il quitte .btn — tooltip disparaît */Dès que le pointeur se déplace vers le tooltip, il quitte l'élément déclencheur — disparaît avant d'être lu.
tooltip avec zone de hover étendue
✓ Conforme.tooltip-wrapper {
position: relative;
display: inline-block;
}
.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus-within .tooltip {
display: block;
}
.tooltip {
position: absolute;
top: 100%; left: 0;
/* Dans .tooltip-wrapper — survol sans disparition */
}
/* Note : Échap reste à implémenter en JS
pour conformité complète */Zone de hover couvre déclencheur + tooltip via le conteneur. :focus-within rend accessible au clavier. Échap nécessite du JS.
Référence WCAG : 2.1.1