Contenu au survol ou au focus

Ce que le critère demande

Lorsqu’un contenu supplémentaire — une infobulle, un popover, un sous-menu — apparaît parce que l’utilisateur a survolé ou mis le focus sur un élément, il doit respecter trois règles. Masquable : l’utilisateur peut le fermer sans déplacer le pointeur ni le focus (généralement via la touche Échap). Survolable : si l’utilisateur déplace le pointeur du déclencheur vers le contenu révélé, celui-ci reste ouvert. Persistant : il ne disparaît pas par délai d’expiration tant que l’utilisateur ne l’a pas fermé ou que le déclencheur n’a pas perdu le focus.

Comment le respecter

• Associer la touche Échap à la fermeture de toute infobulle ou popover s’ouvrant au survol ou au focus.
• S’assurer que l’élément infobulle est accessible à la souris — ne pas le positionner de telle sorte que se déplacer vers lui déclenche un événement mouseout sur le déclencheur.
• Ne pas fermer automatiquement les infobulles après un délai pendant que l’utilisateur survole encore le déclencheur ou qu’il a le focus dessus.
• Utiliser aria-describedby pour associer le déclencheur au contenu flottant afin que les lecteurs d’écran annoncent le contenu.
• Construire les popovers avec l’attribut HTML popover ou une bibliothèque éprouvée (Popper.js, Floating UI, Radix UI) — les deux gèrent ces règles.
• Pour les sous-menus déroulants, prévoir une petite zone tampon entre l’élément de menu parent et le sous-menu afin que le pointeur puisse passer sans déclenchement de fermeture.

Échecs courants

• Infobulles CSS uniquement via :hover avec un espace entre le déclencheur et l’infobulle — le pointeur entre dans l’espace, mouseout se déclenche, l’infobulle disparaît.
• Infobulles se fermant automatiquement après 2 secondes même si l’utilisateur survole encore l’élément.
• Absence de gestionnaire de touche Échap — les utilisateurs au clavier ne peuvent pas fermer une infobulle déclenchée au focus sans quitter le champ.
• Menus déroulants se fermant dès que le pointeur quitte l’élément parent, avant d’atteindre les éléments enfants.
• Popovers déclenchés au focus qui occupent la zone visible et ne peuvent pas être masqués par Échap — ils restent indéfiniment à l’écran.

Pourquoi c’est important

Ce critère est le plus souvent enfreint par les infobulles artisanales et les menus déroulants en CSS pur. Il convient de passer à une bibliothèque qui gère déjà la fermeture et le survol, ou d’auditer le code personnalisé en regard des trois règles. C’est une correction à fort rendement : le contenu au survol tend à être omniprésent dans une interface complexe, de sorte que le corriger une fois dans un composant partagé efface une dette d’audit considérable.