Hoe maak je een lightbox toegankelijk?
Een lightbox maak je toegankelijk door hem volledig met het toetsenbord bedienbaar te maken en de focus binnen het venster te houden.
Dat laatste heet een focusval, en zonder die val loopt je bezoeker met de tabtoets zo de pagina eronder in.
Dan weet niemand meer waar hij is.
De drie basisregels
Focus springt bij openen naar het venster. Tabben blijft binnen het venster. Escape sluit en de focus keert terug naar de knop waarmee je opende.
Meer daarover lees je bij accessibility.
Wat je meegeeft
Een rol die zegt dat het een dialoogvenster is, en een naam zodat een schermlezer kan voorlezen waar het over gaat.
Meer daarover lees je bij dom.
De sluitknop
Minstens vierenveertig bij vierenveertig pixels, met een zichtbaar kruisje en een tekstlabel voor schermlezers.
Meer daarover lees je bij of een lightbox gebruiksvriendelijk is.
Mijn vuistregels
- Focus naar binnen bij openen.
- Focus vasthouden zolang hij open is.
- Escape sluit altijd.
- Focus terug naar de knop bij sluiten.
Die laatste wordt het vaakst vergeten en is voor toetsenbordgebruikers de belangrijkste.
Wat de meeste bibliotheken al doen
Een gangbare lightbox regelt dit meestal zelf. Een zelfgebouwde bijna nooit.
Meer daarover lees je bij javascript.
Hoe je het test
Open hem met tab en enter, blijf tabben en kijk of je binnen blijft. Druk op escape en kijk waar je focus landt.
Meer daarover lees je bij wat een lightbox is.