Hoe maak je een modal toegankelijk?
Een toegankelijke modal neemt bij het openen de focus over, houdt die binnen het venster en geeft hem bij het sluiten terug aan de knop waarmee je opende.
Daarnaast sluit hij altijd met de escapetoets.
Die vier punten samen maken het verschil.
Waarom focus zo belangrijk is
Wie met het toetsenbord werkt, ziet niet dat er een venster opende. Zonder focusverplaatsing tabt hij door de pagina eronder.
Meer daarover lees je bij accessibility.
Wat je meegeeft
Een rol die zegt dat het een dialoogvenster is, en een naam die de kop van het venster aanwijst.
Zo weet een schermlezer meteen waar het over gaat. Meer daarover lees je bij javascript.
De achtergrond
Zet de pagina eronder vast zodat hij niet meescrollt, en verberg hem voor schermlezers zolang het venster open is.
Meer daarover lees je bij lightbox.
Mijn vuistregels
- Focus naar het venster bij openen.
- Tabben blijft binnen het venster.
- Escape sluit altijd.
- Focus terug naar de knop bij sluiten.
Die laatste vergeet vrijwel iedereen, en juist die maakt het bruikbaar.
De sluitknop
Zichtbaar, groot genoeg voor een duim en voorzien van een tekstlabel voor schermlezers.
Meer daarover lees je bij conversie.
Hoe je het test
Open de modal met tab en enter, blijf tabben en druk daarna op escape. Kom je terug bij je knop, dan klopt het.
Meer daarover lees je bij cookie.