1.4.13Niveau AA1.4 Distinguishable

Content bij hover of 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.

Bekijk W3C-specificatie ↗

Wat het betekent

Content bij hover of focus begrijpen | Hoe te voldoen aan Content bij hover of focus (Niveau AA) Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken: Sluiten Er is een mechanisme beschikbaar waarmee de aanvullende content kan worden gesloten zonder de aanwijzer hover of de toetsenbordfocus te verplaatsen, tenzij de aanvullende content een invoerfout communiceert of andere content niet verbergt of vervangt; Aanwijsbaar Wanneer een aanwijzer hover aanvullende content kan activeren, dan kan de aanwijzer over de aanvullende content worden bewogen zonder dat deze verdwijnt; Aanhouden De aanvullende content blijft zichtbaar totdat de oorzaak voor de hover of focus is verwijderd, de gebruiker de content sluit of de informatie niet langer geldig is. Uitzondering: De visuele weergave van de aanvullende content wordt beheerd door de user agent en wordt niet aangepast door de auteur. Noot Voorbeelden van aanvullende content die door de user agent wordt bepaald, zijn de browser tooltips die worden gemaakt met behulp van het HTML title attribuut . Noot Aangepaste tooltips, submenu's en andere niet-modale pop-ups die worden weergegeven bij hover en focus zijn voorbeelden van aanvullende content waarop dit criterium van toepassing is. Principe 2. Bedienbaar Componenten van de gebruikersinterface en navigatie moeten bedienbaar zijn. Richtlijn 2.1 Toetsenbordtoegankelijk Maak alle functionaliteit beschikbaar vanaf een toetsenbord.

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 */

Hoe A11yRisk dit detecteert

A11yRisk detecteert dit criterium automatisch.

Scan uw site op deze overtreding →