Hoe test je elementen die op hover, focus of klik verschijnen (en meteen weer verdwijnen)?
- Tips en tools
- 25 oktober 2025
Table Of Contents
Sommige UI-elementen verschijnen alleen kort — bijvoorbeeld vensters, dropdowns of menus die op hover of focus zichtbaar worden. Die kunnen interactieve onderdelen bevatten die je moet testen op toegankelijkheid. Denk aan:
- Is het element bereikbaar met het toetsenbord?
- Is de focus zichtbaar en heeft die voldoende kleurcontrast?
- Zijn alle interactieve elementen toegankelijk voor een schermlezer?
Het probleem: vaak sluiten zulke vensters meteen zodra de muis beweegt of de focus verandert. Daardoor kun je ze niet goed analyseren.
Oplossing: “Bevries” het venster.
Zo doe je dat in Chrome DevTools:
- Open de Console. Plak dit script:
setTimeout(() => { debugger }, 3000)
Druk op Enter en beweeg de muis meteen naar het element dat het venster opent.
Na 3 seconden pauzeert het script en blijft het venster open.
Test de inhoud.
Wat je kunt testen
Als het bijvoorbeeld om een menu gaat, controleer dan minimaal:
- Focuszichtbaarheid en kleurcontrast
- Focusvolgorde binnen het menu en ten opzichte van de knop die het opent
- Contrast van tekst — in standaard, hover en focus-toestand
- Toetsenbordbediening
- Naam en rol van interactieve elementen
- Status van checkboxes of toggles
- Of het menu met de ESC-toets kan worden gesloten
💡 Deze lijst is niet volledig.
De knop die het venster opent, heeft z’n eigen checklist. Zie onze andere artikelen voor meer richtlijnen.