Wat is een modal?
Een modal is een venster dat bovenop de content van de pagina verschijnt. Deze modal (pop-up) stuurt de aandacht van de bezoeker naar één taak. Meestal wil je dat de gebruiker eerst de modal afhandelt voordat die verder kan met de pagina erachter.
Een voorbeeld hiervan is een pop-up voor cookie-instellingen met een overlay. De onderdelen achter de modal kunnen pas gebruikt worden als een keuze voor de cookies gemaakt is.
Waar gaat het vaak fout?
- De focus komt niet in de modal terecht, waardoor toetsenbordgebruikers “achter” de modal blijven navigeren.
- Je kunt met Tab uit de modal ontsnappen (geen focus trap).
- De modal heeft geen duidelijke titel of toegankelijke naam.
- De sluitknop is niet goed gelabeld (“knop” of alleen een icoon zonder naam).
- De achtergrond is nog steeds klikbaar of leesbaar voor screenreaders, wat verwarring oplevert.
- Na sluiten gaat de focus niet terug naar de knop of link waarmee de modal werd geopend.
Checklist: zo maak je een modal toegankelijk
1) Zet de focus bij openen in de modal
Als de modal opent, moet de focus direct naar de modal gaan. Meestal naar de titel of het eerste interactieve element (zoals het eerste invoerveld).
2) Houd de focus binnen de modal
Zolang de modal open is, moet tabben binnen de modal blijven. Dit voorkomt dat gebruikers per ongeluk in de pagina erachter terechtkomen.
3) Sluiten moet altijd kunnen
- Een duidelijke sluitknop die bereikbaar is met het toetsenbord.
- Sluiten via Esc (tenzij er een goede reden is om dat niet te doen, bijvoorbeeld bij een kritieke flow).
4) Geef de modal een duidelijke titel en naam
Een modal moet een duidelijke titel hebben die beschrijft wat het venster is, bijvoorbeeld “Cookie-instellingen” of “Bevestig je e-mailadres”. Zorg dat die titel ook programmatisch gekoppeld is aan de modal.
5) Verberg de achtergrond voor screenreaders
De inhoud achter de modal moet niet tegelijkertijd leesbaar zijn voor screenreaders. Anders hoort iemand zowel de modal als de pagina erachter, wat zorgt voor verwarring. Gebruik hiervoor een robuuste aanpak, bijvoorbeeld door de rest van de pagina tijdelijk te verbergen voor assistieve technologie.
6) Zet de focus terug bij sluiten
Als de modal sluit, moet de focus terug naar de trigger (de knop of link die de modal opende). Zo kan de gebruiker logisch verder navigeren.
Codevoorbeeld: basisstructuur van een modal
Hieronder staat een voorbeeld van de semantische basis. Let op: focusbeheer (focus zetten, focus trap, focus terugzetten) gebeurt meestal met JavaScript, maar de HTML-structuur moet kloppen.
<button type="button" aria-haspopup="dialog" aria-controls="modal-voorbeeld">
Open modal
</button>
<div id="modal-voorbeeld" role="dialog" aria-modal="true" aria-labelledby="modal-titel" hidden>
<div class="modal-content">
<h2 id="modal-titel">Cookie-instellingen</h2>
<p>Kies welke cookies je wil toestaan.</p>
<button type="button">Opslaan</button>
<button type="button" aria-label="Sluiten">Sluiten</button>
</div>
</div>