1.4.13 – Content bij hover of focus (WCAG) | Niveau AA

Aanvullende content die door hover zichtbaar wordt, kan door de gebruiker naar wens behouden of verborgen worden

Dit succescriterium heeft betrekking op aanvullende content die verschijnt zonder dat de gebruiker daar bewust voor gekozen heeft, door middel van een click of aanraking op het touchscreen. Deze content verschijnt bij hover of focus van een element dat aanvullende content opent die daarvoor niet zichtbaar was.

Voorbeelden van deze aanvullende content zijn:

  • tooltips die extra informatie over de content geven
  • submenu’s die uitklappen wanneer je over het menu hovert
  • pop ups die bij hover verschijnen

Een tooltip is een informatieve tekst die verschijnt wanneer er met de muisaanwijzer boven een tekst of afbeelding wordt gehovert. Vaak wordt door webbrowser in de tooltip het title-attribuut van een hyperlink of afbeelding weergegeven.

Voor slechtzienden of gebruikers met een cognitieve beperking is het van belang dat aanvullende content niet vanwege een time-out vanzelf verdwijnt. Ook wanneer tekst vergroot wordt, moet de aanvullende content zichtbaar en klikbaar blijven.

Wat te doen

Gebruik HTML (aria-labels), CSS (role=”tooltip” en JavaScript om dit succescriterium te behalen. Voor content die via hover of focus automatisch verschijnt, geldt dat deze:

  • Handmatig gesloten moet kunnen worden door de gebruiker zonder dat de aanwijzer of focus verplaatst wordt naar een ander element. Dit gebeurt door middel van een sluitingsmechanisme, een knop of link.
  • Indien de aanvullende content hyperlinks naar nieuwe content bevat (bijvoorbeeld, bij een submenu), moet de muisaanwijzer tussen de links bewogen kunnen worden zonder dat de aanvullende content verdwijnt.
  • Zichtbaar blijft zolang de gebruiker de aanwijzer of focus niet verplaatst.

Tips

  • Zorg dat aanvullende content (bijvoorbeeld een submenu) geen time-out kent. De content moet zichtbaar blijven tot de focus verlegd wordt.

Uitzonderingen

  • De aanvullende content vereist geen sluitingsmechanisme als de content een invoer foutmelding aangeeft.
  • Als de aanvullende of geen andere content verbergt of vervangt, vereist deze content ook geen sluitingsmechanisme.
  • Een uitzondering geldt voor tooltips die de tekst uit het title-attribuut weergeven. Deze wordt namelijk door browsers weergeven, niet door code die de developer geschreven heeft.