Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung →
Barrierefreiheit
Hoe moeten tooltips en pop-ups op websites bediend kunnen worden?
Pop-ups die bij muishovering of toetsenbordfocus verschijnen — tooltips, submenu's, info-bubbels — moeten drie voorwaarden vervullen: de bezoeker kan ze zonder muisbeweging sluiten, meestal met Escape. Hij kan de muis naar de pop-up bewegen zonder dat deze verdwijnt. En deze blijft staan totdat hij deze zelf sluit of verdergaat.
Drie regels voor elke pop-up
Wie met sterke schermvergroting werkt, ziet altijd maar een fragment van de pagina. Verschijnt bij muishovering een tooltip, bedekt die snel het tekst wat u net leest — en zonder sluitoptie zit u vast. Vandaar de eerste regel: sluitbaar, meestal met de Escape-toets. De tweede regel betreft dezelfde groep: Om een pop-up vergroot te lezen, moet u de muis ernaartoe kunnen bewegen — verdwijnt die bij verlating van de trigger meteen, is de inhoud onbereikbaar. De derde regel vereist standvastigheid: een pop-up die na enkele seconden vanzelf verdwijnt, is voor trage lezers waardeloos. Klassieke probleemsituaties zijn zelfgemaakte submenu's en infosymbolen in formulieren.
Zo gaat onze controle met pop-ups om
Pop-ups verschijnen pas in samenspel: u moet de muis over de trigger bewegen, op Escape drukken, de verblijfduur observeren. Onze meetkern voert op uw site doelgericht passieve interacties uit — hij wandelt bijvoorbeeld met toetsenbordfocus door de pagina en observeert gedrag. Een volledig oordeel over alle drie voorwaarden voor elke afzonderlijke pop-up levert dat niet op; volgens ons principe geldt hier niets als geslaagd zonder echte bewijzen. Het rapport geeft dit criterium daarom als manuele controlepunt weer. Met Gold-standaard bedient een toetser de pop-ups van uw site met muis en toetsenbord door en registreert alles wat niet sluit, vluchtig verdwijnt of onbereikbaar is.
Beispiele
Tooltip nur beim Überfahren
<span class="hilfe" title="Die Kundennummer steht auf der Rechnung oben rechts.">?</span><button type="button" aria-describedby="hilfe-knr" aria-expanded="false">Wo finde ich das?</button>
<p id="hilfe-knr" hidden>Die Kundennummer steht auf der Rechnung oben rechts.</p>Eine Einblendung muss per Tastatur erreichbar sein, mit Escape schließen und stehen bleiben, solange der Zeiger darauf ruht.
- Beweeg de muis over de infosymbolen en menu's van uw site en druk op Escape — het pop-up zou zich moeten sluiten.
- Beweeg de muis van de trigger naar het pop-up zelf — deze moet geopend blijven.
- Verwijder timers die pop-ups na enkele seconden automatisch sluiten.
- Geef de voorkeur aan klikken in plaats van muishovering als trigger — wat met klikken opent en sluit, vervult de regels bijna vanzelf.
- Vraag uw bureau om voor submenu's en tooltips van bewezen toegankelijke bouwstenen te gebruiken in plaats van zelfgebouwde.