Campus Design System

Appearance

1.4.13 Inhoud bij hover of focus (Content on Hover or Focus) niveau AA ​

Uitleg ​

Het WCAG-criterium 1.4.13 Inhoud bij hover of focus vereist dat inhoud die verschijnt wanneer een gebruiker met de muis over een element beweegt (hover) of wanneer het element de focus heeft (bijvoorbeeld via het toetsenbord), op een manier wordt gepresenteerd die deze interactie niet onverwacht of moeilijk maakt voor de gebruiker.

Wanneer een interactief element zoals een knop of een link een tooltip, pop-up, of andere inhoud weergeeft bij hover of focus, moet deze extra inhoud:

  • Gemakkelijk te sluiten of verbergen zijn,
  • Niet automatisch verschijnen of verdwijnen, tenzij de gebruiker er expliciet mee interageert.

Het doel is om te voorkomen dat belangrijke informatie wordt verborgen achter interactieve elementen of dat gebruikers de controle verliezen over de interface.

Wat betekent dit in de praktijk? ​

Wanneer een gebruiker met de muis over een element beweegt of focus legt op een element (bijvoorbeeld door met de Tab-toets naar een knop te navigeren), kunnen er extra informatie of tooltips verschijnen. Het is belangrijk dat deze inhoud duidelijk zichtbaar is, gemakkelijk te beheren is en geen storende ervaring veroorzaakt.

Bijvoorbeeld:

  • Tooltip bij hover: Wanneer je met de muis over een knop beweegt, verschijnt er een extra tekstballonnetje (tooltip) met uitleg over wat de knop doet.
  • Pop-up bij focus: Wanneer een gebruiker via het toetsenbord een veld bereikt, verschijnt er een aanwijzing of uitleg die alleen zichtbaar is wanneer het veld in focus is.

Waarom is dit belangrijk? ​

Dit criterium is cruciaal voor gebruikers die navigeren met toetsenbord of voor gebruikers met visuele of motorische beperkingen. Als een interactief element onverwacht extra inhoud toont bij hover of focus, kan dit verwarrend zijn of zelfs frustrerend voor de gebruiker. Het moet duidelijk zijn wanneer deze inhoud verschijnt, en de gebruiker moet de controle hebben over het weergeven en verbergen van deze extra informatie.

Voorbeeld van het probleem ​

Stel je voor dat een gebruikersinterface een tooltip toont wanneer je de muis boven een knop beweegt, maar deze tooltip verdwijnt automatisch zodra de gebruiker de muis verplaatst. Dit kan problematisch zijn, omdat de gebruiker geen tijd heeft om de informatie te lezen, of erger, als de tooltip ook verdwijnt bij het navigeren via het toetsenbord (focus).

Oplossing voor dit probleem ​

Zorg ervoor dat de inhoud die verschijnt bij hover of focus:

  • Eenvoudig te sluiten is zonder dat de gebruiker per ongeluk interactie moet hebben met andere elementen.
  • Niet automatisch verdwijnt: De informatie moet zichtbaar blijven totdat de gebruiker expliciet besluit deze te sluiten of de focus/verplaatsing te beëindigen.

Voorbeeld van een goede oplossing in CSS en JavaScript:

html
<!-- Slecht voorbeeld: Tooltip verdwijnt te snel -->
<button class="tooltip" aria-describedby="tooltip">Hover over mij</button>
<div id="tooltip" class="tooltip-text">Klik hier om meer informatie te krijgen.</div>

<style>
  .tooltip-text {
    display: none;
  }

  .tooltip:hover + .tooltip-text {
    display: block;
  }
</style>

<!-- Goed voorbeeld: Tooltip blijft zichtbaar totdat de gebruiker de focus verplaatst -->
<button class="tooltip" aria-describedby="tooltip">Hover over mij</button>
<div id="tooltip" class="tooltip-text">Klik hier om meer informatie te krijgen.</div>

<style>
  .tooltip-text {
    display: none;
  }

  .tooltip:hover + .tooltip-text,
  .tooltip:focus + .tooltip-text {
    display: block;
  }

  .tooltip-text {
    position: absolute;
    background-color: #333;
    color: white;
    padding: 5px;
    border-radius: 3px;
  }
</style>

In het bovenstaande voorbeeld is er gezorgd voor een eenvoudige oplossing waarbij de tooltip zichtbaar blijft bij hover en focus, en de gebruiker kan de informatie lezen zonder dat de tooltip automatisch verdwijnt.

Belangrijke overwegingen ​

  • Visuele focusindicatoren: Wanneer de inhoud verschijnt bij focus (toetsenbord), zorg ervoor dat de gebruiker duidelijk kan zien welk element in focus is.
  • Geen automatische verdwijning: De inhoud moet niet verdwijnen wanneer de gebruiker de focus verplaatst of de muis verplaatst, tenzij de gebruiker hier expliciet mee interageert.
  • Makkelijk sluiten: Voor pop-ups of modale vensters moet er altijd een duidelijke manier zijn om ze te sluiten, zoals een sluitknop of het buiten de pop-up klikken.

Alternatieve benaderingen ​

  • Gebruik van modale vensters: Voor complexere inhoud kan een modaal venster of dialoogvenster nuttig zijn, dat de gebruiker kan sluiten wanneer gewenst.
  • Visuele animaties: Als je animaties gebruikt voor het verschijnen van inhoud, zorg ervoor dat de animaties de toegankelijkheid niet in de weg staan. De gebruiker moet voldoende tijd hebben om de inhoud te lezen.

Belangrijkste punten ​

  • Zorg ervoor dat inhoud die verschijnt bij hover of focus niet onverwacht verdwijnt.
  • Maak de extra inhoud gemakkelijk te sluiten of te verbergen door de gebruiker.
  • Test of de inhoud goed werkt met zowel de muis als het toetsenbord.

Tools en Hulpmiddelen ​

  • aXe Accessibility Tool: Een populaire tool voor het testen van toegankelijkheid, inclusief inhoud bij hover of focus. aXe Browser Extension.
  • WAVE (Web Accessibility Evaluation Tool): Helpt bij het identificeren van problemen met inhoud die verschijnt bij hover of focus. WAVE Tool.

Betekenis voor toegankelijkheid ​

Door ervoor te zorgen dat inhoud die verschijnt bij hover of focus op een beheerste manier wordt gepresenteerd, kunnen we de gebruikerservaring verbeteren voor mensen die afhankelijk zijn van toetsenbordnavigatie of andere hulpmiddelen. Dit voorkomt verwarring en maakt de interface toegankelijker voor iedereen.

Referenties ​