Focusval

Een focusval is een bewuste beperking op de toetsenbordnavigatie: zolang een modaal dialoogvenster open is, cirkelt Tab alleen langs de focusbare elementen binnen dat dialoogvenster. Shift+Tab beweegt in omgekeerde richting. De gebruiker kan niet via Tab terugkeren naar de (visueel geblokkeerde) pagina achter het modaal, tenzij het expliciete gesloten wordt.

Een focusval is vereist voor toegankelijke modale dialoogvensters. Zonder focusval belanden toetsenbord- en schermlezergebruikers op onzichtbare pagina-inhoud die ze niet kunnen zien en waaruit ze niet kunnen ontsnappen.

Waarom dit noodzakelijk is

Een modaal dialoogvenster wordt visueel weergegeven als een laag boven de pagina. De bedoeling — nadrukkelijk — is dat de gebruiker met het modaal interacteert totdat deze klaar is, en daarna terugkeert naar de pagina. Voor muisgebruikers is dit intuïtief: klikken buiten het modaal doet niets (of sluit het); klikken binnenin bereikt de besturingselementen van het modaal.

Zonder een focusval krijgen toetsenbordgebruikers een inconsistente ervaring:

1. Modaal opent. Focus beweegt naar (of zou moeten bewegen naar) het eerste focusbare element binnenin.
2. Gebruiker drukt op Tab. Focus beweegt naar het volgende focusbare element in het modaal.
3. Gebruiker blijft Tab indrukken. Focus bereikt uiteindelijk het laatste focusbare element in het modaal.
4. Nog één keer Tab. Zonder focusval springt focus naar het volgende focusbare element in het document — ergens achter het modaal, onzichtbaar voor de gebruiker.

Het enige signaal dat dit is gebeurd, is dat de focusindicator van het modaal verdwijnt. De gebruiker heeft geen idee waar zijn focus zich bevindt.

Het volledige modale patroon

Een volledig toegankelijk modaal omvat:

1. Focus beweegt het modaal in bij het openen — doorgaans naar het eerste focusbare element of naar de kop van het modaal (als de kop tabindex="-1" heeft voor programmatische focus).
2. Focus is gevangen in het modaal: Tab van het laatste element gaat terug naar het eerste; Shift+Tab van het eerste gaat naar het laatste.
3. Escape sluit het modaal en geeft focus terug aan het triggerelement dat het opende (niet aan de documentbody).
4. Klikken buiten het modaal sluit het — optioneel gedrag; niet alle modalen doen dit, maar als uw modaal dit doet, moet de focus tijdens gebruik gevangen blijven.
5. role="dialog" plus aria-modal="true" op het modaalelement, met aria-labelledby verwijzend naar de kop van het modaal.

Implementaties

De meestgeciteerde bibliotheek is focus-trap (npm: focus-trap, focus-trap-react, focus-trap-vue) — klein, zonder afhankelijkheden, en verwerkt alle randgevallen (overslaan van onzichtbare elementen, integratie met inert, focus herstellen bij sluiten).

Het moderne browserprimitief is <dialog> met dialog.showModal(), dat automatisch focus vangt en Escape afhandelt. Browserondersteuning is nu sterk genoeg om dit als basislijn te gebruiken.

Anti-patroon: de “val die niet vrijgeeft”

Een focusval moet vrijgeven wanneer het modaal sluit. De meest voorkomende implementatiefout is vergeten focus terug te zetten op het originele triggerelement — focus belandt dan op de documentbody, wat schermle­zers als niets aankondigen. De gebruiker wordt in stilte achtergelaten en moet opnieuw vanaf het begin van de pagina beginnen te tabben.