1.4.13Niveau AA1.4 Distinguishable

Contenu au survol ou au focus

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the additional content is dismissible, hoverable, and persistent.

Voir la spécification W3C ↗

Ce que cela signifie

Comprendre Contenu au survol ou au focus (en anglais) | Comment satisfaire à Contenu au survol ou au focus (en anglais) (Niveau AA) Lorsque la réception puis le retrait du survol du pointeur ou du focus du clavier déclenche l’affichage puis le masquage d’un contenu additionnel, les éléments suivants sont vrais : Masquer il existe un mécanisme permettant de masquer le contenu additionnel sans déplacer le pointeur ou le focus du clavier, à moins que le contenu additionnel ne communique une erreur de saisie ou ne masque ni ne remplace un autre contenu ; Survoler si le survol du pointeur peut déclencher le contenu additionnel, alors le pointeur peut être déplacé sur le contenu additionnel sans que celui-ci disparaisse ; Persister le contenu additionnel reste visible jusqu’à ce que le survol ou le focus soit retiré, que l’utilisateur le masque ou que ses informations ne soient plus valables. Exception : la présentation visuelle du contenu additionnel est contrôlée par l’agent utilisateur et n’est pas modifiée par l’auteur. Note Parmi les exemples de contenu additionnel contrôlé par l’agent utilisateur figurent les infobulles du navigateur créées à l’aide de l’ attribut HTML title . Note Les infobulles personnalisées, les sous-menus et autres fenêtres non modales qui s’affichent au survol et à la prise de focus sont des exemples de contenu additionnel couvert par ce critère. 2. Utilisable § Les composants de l’interface utilisateur et de navigation doivent être utilisables. Règle 2.1 Accessibilité au clavier § Rendre toutes les fonctionnalités accessibles au clavier.

Failing example

/* Fails: tooltip disappears the moment pointer moves off trigger */
.trigger:hover .tooltip { display: block; }
/* Moving to read the tooltip causes hover to leave trigger */

How to fix it

/* Pass: tooltip stays visible when pointer moves onto it */
.trigger:hover .tooltip,
.tooltip:hover {
  display: block;
}
/* Also add pointer-events:none only when tooltip must not
   intercept clicks — remove it here since it must be hoverable */

Comment A11yRisk détecte cela

A11yRisk détecte ce critère automatiquement.

Analyser votre site pour cette violation →