Succescriterium 1.4.13 Content bij hover of focus

Niveau AA

Lees de officiële tekst van succescriterium 1.4.13 Content bij hover of focus

Tooltips: er een bouwen die blijft staan
De eenvoudigste oplossing is geen tooltip bouwen maar de tekst op de pagina zetten. Kan dat niet, dan moeten er drie dingen kloppen.

Escape sluit de uitleg:
```
element.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') { verbergTooltip(); }
});
```
De aanwijzer kan erheen. Laat geen gat tussen het onderdeel en de uitleg: beweegt de aanwijzer over dat gat, dan telt dat als wegwijzen en verdwijnt de uitleg.
```
.tooltip {
  margin-block-start: 0;
  padding-block-start: 8px;
  pointer-events: auto;
}
```
En er zit geen tijdklok op. Een bezoeker die langzaam leest is na drie seconden halverwege:
```
setTimeout(verbergTooltip, 3000);   /* niet doen */
```
Gebruik :focus-visible naast :hover, anders krijgt een bezoeker met een toetsenbord de uitleg nooit te zien. Zet daarnaast aria-describedby op het onderdeel, zodat een schermlezer de uitleg voorleest.
```
<button aria-describedby="uitleg-btw">Btw-nummer</button>
<div id="uitleg-btw" role="tooltip">Je btw-nummer staat op je factuur.</div>
```
Thema’s
Bediening Formulieren
Doelgroepen
Auditeur Ontwikkelaar Vormgever
Wie het raakt
Je beweegt moeilijk Je leest of onthoudt moeilijk Je ziet slecht
Hulpmiddelen
Schermvergroting Toetsenbord
Open dit onderwerp op een eigen pagina
Tooltips: zo test je het
Zoek eerst alles op wat verschijnt bij aanwijzen of bij focus. Dat zijn meestal vraagtekens, pictogrammen, menu’s en linkvoorbeelden.

Ga daarna als volgt te werk:
- Wijs het onderdeel aan tot de uitleg verschijnt.
- Beweeg de aanwijzer langzaam naar de uitleg toe. Blijft hij staan?
- Ga met de aanwijzer over de uitleg heen. Blijft hij nog steeds staan?
- Druk op Escape zonder de aanwijzer te verplaatsen. Verdwijnt hij?
- Wijs opnieuw aan en wacht tien seconden. Verdwijnt hij vanzelf?
Doe de test daarna met het toetsenbord. Tab naar hetzelfde onderdeel: verschijnt de uitleg ook dan? Zo niet, dan mist een deel van de bezoekers hem helemaal.

Vind je een tooltip met informatie die nergens anders staat, dan is dat meer dan een afwijking op dit criterium. Dan mist een deel van de bezoekers inhoud.

Thema’s
Bediening Formulieren
Doelgroepen
Auditeur Ontwikkelaar Vormgever
Wie het raakt
Je beweegt moeilijk Je leest of onthoudt moeilijk Je ziet slecht
Hulpmiddelen
Schermvergroting Toetsenbord
Open dit onderwerp op een eigen pagina
Tooltips: wat het criterium vraagt
Verschijnt er extra inhoud zodra een bezoeker iets aanwijst of met het toetsenbord selecteert — een tooltip, een uitklapmenu, een voorbeeldvenster — dan moet die inhoud te lezen zijn. Wie ingezoomd werkt ziet de uitleg buiten zijn deel van het scherm staan en moet er met de aanwijzer naartoe. Verdwijnt de uitleg onderweg, dan is hij onbereikbaar.

Er gelden drie eisen:
- Wegklikbaar. De uitleg is te sluiten met Escape, zonder de aanwijzer te verplaatsen.
- Aanwijsbaar. De aanwijzer kan erheen zonder dat de uitleg verdwijnt.
- Blijvend. De uitleg blijft staan tot de bezoeker wegwijst, hem sluit of de informatie niet meer klopt. Niet tot een tijdklok afloopt.
Waar dit opduikt: tooltips bij een pictogram of vraagteken, uitklapmenu’s die opengaan bij aanwijzen, voorbeeldvensters bij een link, foutmeldingen die bij focus verschijnen, en een winkelmandje dat opengaat bij aanwijzen.

Op een aanraakscherm bestaat aanwijzen niet. Wat alleen bij aanwijzen verschijnt, moet daar op een andere manier bereikbaar zijn — of de informatie hoort gewoon op de pagina te staan.

Thema’s
Bediening Formulieren
Doelgroepen
Auditeur Ontwikkelaar Vormgever
Wie het raakt
Je beweegt moeilijk Je leest of onthoudt moeilijk Je ziet slecht
Hulpmiddelen
Schermvergroting Toetsenbord
Open dit onderwerp op een eigen pagina

Succescriterium 1.4.13 Content bij hover of focus

Tooltips: er een bouwen die blijft staan

Tooltips: zo test je het

Tooltips: wat het criterium vraagt