Zijn tooltips toegankelijk?
Tooltips zijn toegankelijk als ze met het toetsenbord bereikbaar zijn, lang genoeg blijven staan om te lezen en met de escapetoets te sluiten zijn.
De meeste tooltips voldoen aan geen van die drie.
Daarom staan ze bekend als lastig.
De toetsenbordeis
Je element moet met de tabtoets te bereiken zijn, en de tooltip moet dan verschijnen. Niet alleen bij zweven.
Meer daarover lees je bij accessibility.
De leestijd
De tooltip moet blijven staan zolang je muis erop staat, ook als je met je muis van het element naar de ballon beweegt.
Meer daarover lees je bij frontend.
De sluitknop
Escape moet hem sluiten. Dat is de standaardverwachting bij alles wat over je pagina verschijnt.
Meer daarover lees je bij navigatie.
Mijn vuistregels
- Bereikbaar met de tabtoets.
- Blijft staan als je erheen beweegt.
- Escape sluit hem.
- Voldoende contrast in de ballon.
Die tweede is een klassieke fout: de tooltip verdwijnt zodra je erheen wilt.
Voor een schermlezer
Koppel de tooltip aan het element met een beschrijvingsverwijzing. Dan wordt hij voorgelezen bij het element.
Meer daarover lees je bij alt tekst.
De eenvoudige uitweg
Zichtbare hulptekst onder het element. Die is per definitie toegankelijk en vraagt geen code.
Meer daarover lees je bij wanneer je een tooltip gebruikt.
Wat ik in de praktijk zie misgaan
Er wordt belangrijke informatie in verstopt, en die is dan voor een deel van je bezoekers onbereikbaar.
Het klassieke geval is een formulier waar de eisen aan een veld alleen zichtbaar worden als je met de muis boven een vraagtekentje blijft hangen. Op een telefoon bestaat dat gebaar niet, dus daar zie je het nooit. En wie met het toetsenbord werkt, komt er evenmin bij.
Het gevolg is een foutmelding die mensen niet begrijpen, en dat is precies het punt waarop aanvragen afbreken.
Mijn regel is daarom kort: alles wat iemand nodig heeft om een veld goed in te vullen, staat gewoon onder dat veld. Zichtbaar, altijd, voor iedereen.
Zo’n zwevend tekstje bewaar ik voor toelichting die leuk is om te weten maar niet nodig. Dan is het geen probleem meer als iemand het mist, en hoef ik er ook geen kunstgrepen voor uit te halen.
Meer daarover lees je bij tooltip.