Een tooltip toegankelijk maken: handig voor de muis, lastig voor de rest

Naast het veld “Btw-nummer” in een bestelformulier staat een klein rondje met een i erin. Op de computer beweegt u er met de muis overheen en er verschijnt een wolkje: “Alleen invullen als u zakelijk bestelt”. Op de telefoon tikt dezelfde bezoeker op het rondje en er gebeurt niets. Met het toetsenbord komt hij er niet eens langs. Zo gaat het met veel tooltips: ze werken voor één manier van bedienen en voor de rest niet. Een tooltip toegankelijk maken kan, maar vaak is de betere vraag of de uitleg niet gewoon zichtbaar moet zijn.

Waarom tooltips zo vaak tegenvallen

Een tooltip is tekst die pas verschijnt als u iets doet: met de muis ergens overheen gaan of de focus ergens op zetten. Daar zitten een paar ingebouwde nadelen aan.

• Hover bestaat niet op een touchscreen. Een groot deel van uw bezoekers gebruikt een telefoon. Sommige browsers vertalen een tik naar een hover, andere niet, en het gedrag verschilt per site.
• Toetsenbordgebruikers komen er niet bij als het icoon geen focus kan krijgen. Een <span> met een title-attribuut is daar een bekend voorbeeld van.
• Screenreaders lezen het niet altijd voor. Het title-attribuut wordt door screenreaders wisselend ondersteund en is op mobiel meestal onzichtbaar.
• Vergroting maakt het lastig. Wie met een schermvergroter werkt, ziet een klein stukje van het scherm. Verschijnt de tooltip daarbuiten, dan mist hij hem.
• Het verdwijnt te snel. Een wolkje dat weg is zodra de muis een paar pixels beweegt, is voor iemand met een trillende hand nauwelijks te lezen.

Wat WCAG 1.4.13 vraagt

Het succescriterium 1.4.13, “Inhoud bij hover of focus”, gaat precies over dit soort pop-ups. Het valt onder niveau AA. Als er extra inhoud verschijnt bij hover of focus, moet die aan drie voorwaarden voldoen:

Daarnaast gelden de gewone regels: de trigger moet met het toetsenbord bereikbaar zijn (2.1.1) en de tekst moet voldoende contrast hebben. De native tooltip van het title-attribuut valt buiten 1.4.13 omdat de browser die regelt, maar heeft de andere nadelen hierboven nog steeds.

Toch een tooltip? Zo maakt u de tooltip toegankelijk

Sommige interfaces hebben echt baat bij korte uitleg op afroep, zoals een dashboard met veel iconen. Bouw de tooltip dan zo:

<button type="button" class="info-knop"
        aria-describedby="tip-btw">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="sr-only">Uitleg btw-nummer</span>
</button>
<div role="tooltip" id="tip-btw" hidden>
  Alleen invullen als u zakelijk bestelt.
</div>

Het script toont de tooltip bij hover en bij focus, laat hem staan als de muis eroverheen beweegt, en verbergt hem bij Escape of als de focus weggaat. Op aanraakschermen kunt u de tooltip laten openen bij een tik op de knop. Let erop dat de knop groot genoeg is om te raken: kleine i-tjes zijn vaak 14 of 16 pixels. Maak het klikgebied minimaal 24 bij 24 CSS-pixels, zoals uitgelegd in het artikel over de grootte van klikgebieden.

Betere alternatieven voor de meeste sites

Op een gewone bedrijfswebsite of webshop is een tooltip zelden de beste keuze. Een paar alternatieven die voor iedereen werken:

Hulptekst onder het veld

Zet de uitleg gewoon zichtbaar onder of boven het invoerveld, en koppel hem met aria-describedby. Een screenreader leest hem dan voor bij het veld.

<label for="btw">Btw-nummer (optioneel)</label>
<p id="btw-hulp" class="hulptekst">Alleen invullen als u zakelijk bestelt.</p>
<input id="btw" name="btw" aria-describedby="btw-hulp">

Dat kost een regel extra ruimte, maar niemand hoeft meer te zoeken. Meer over labels en hulpteksten bij velden staat op de pagina over toegankelijke formulieren.

Een tekstlabel bij het icoon

Gebruikt u tooltips om uit te leggen wat een icoon betekent, zet dan liever het woord naast het icoon. “Delen”, “Printen”, “Favoriet”. Een icoon dat een tooltip nodig heeft om begrepen te worden, is eigenlijk niet duidelijk genoeg. Zie ook iconen zonder tekst.

Een uitklapblok

Voor langere uitleg, zoals “Hoe vind ik mijn klantnummer?”, werkt een klein uitklapblok vaak beter. Dat opent op klik, blijft staan en is met elk apparaat te bedienen.

Tooltips in WordPress-thema’s en plugins

Op WordPress-sites komen tooltips meestal uit drie bronnen. Formulierplugins hebben vaak een optie voor een “beschrijving” bij een veld, die soms als zichtbare tekst en soms als hover-wolkje wordt getoond. Kies dan voor de zichtbare variant. Paginabouwers hebben losse tooltip-elementen of zetten een title op knoppen en iconen. En webshopthema’s gebruiken tooltips bij kleurstalen, vergelijkknoppen en verlanglijstjes. Juist daar zit de naam van een variant soms alleen in de tooltip, zodat een screenreadergebruiker niet weet welke kleur hij kiest. Zorg dat zo’n naam ook in de toegankelijke naam van het element zelf staat, bijvoorbeeld als verborgen tekst of als zichtbaar label onder het staal.

Zelf controleren

1. Zoek de tooltips op uw site: i-tjes, vraagtekens, iconen zonder tekst, onderstreepte termen.
2. Tab ernaartoe. Krijgen ze focus? Verschijnt de tekst?
3. Druk op Escape. Verdwijnt de tooltip?
4. Beweeg met de muis van het icoon naar de tooltip zelf. Blijft hij staan?
5. Probeer het op uw telefoon. Kunt u de tekst lezen?
6. Zoom in tot 200%. Valt de tooltip buiten beeld of over belangrijke inhoud?

Vaak blijkt dat de helft van de tooltips weg kan, omdat de tekst beter direct zichtbaar is. Wat overblijft, maakt u met bovenstaande code bruikbaar. Hoe dit past in de rest van uw site, leest u op onze pagina over een toegankelijke website.