Fokus­fälla

En fokusfälla är en avsiktlig begränsning av tangentbordsnavigering: medan en modal dialog är öppen cyklar Tab bara mellan de fokusbara elementen inuti dialogen. Shift+Tab går åt andra hållet. Användaren kan inte tabba sig tillbaka till den (visuellt dolda) sidan bakom modalen förrän den stängs explicit.

Fokusfångning krävs för tillgängliga modala dialoger. Utan den hamnar tangentbords- och skärmläsaranvändare på osynligt sidinnehåll som de varken kan se eller ta sig ur.

Varför detta är nödvändigt

En modal dialog presenteras visuellt som ett lager ovanpå sidan. Avsikten är tydlig: användaren ska interagera med modalen tills de är klara och sedan återvända till sidan. För musanvändare är detta intuitivt — ett klick utanför modalen gör ingenting (eller stänger den); ett klick inuti når modalens kontroller.

Utan en fokusfälla får tangentbordsanvändare en inkonsekvent upplevelse:

1. Modalen öppnas. Fokus flyttas till (eller bör flytta till) det första fokusbara elementet inuti.
2. Användaren trycker Tab. Fokus går till nästa fokusbara element inuti modalen.
3. Användaren fortsätter trycka Tab. Fokus når det sista fokusbara elementet inuti.
4. Ytterligare ett Tab. Utan fälla hoppar fokus till nästa fokusbara element i dokumentet — någonstans bakom modalen, osynligt för användaren.

Det enda tecknet på att detta inträffat är att modalens fokusindikator försvinner. Användaren vet inte var fokus befinner sig.

Det fullständiga modal­mönstret

En komplett tillgänglig modal inkluderar:

1. Fokus flyttas in i modalen när den öppnas — vanligtvis till det första fokusbara elementet eller till modalens rubrik (om rubriken har tabindex="-1" för programmatiskt fokus).
2. Fokus fångas inuti modalen: Tab från det sista elementet går tillbaka till det första; Shift+Tab från det första går till det sista.
3. Escape stänger modalen och återlämnar fokus till det utlösarelement som öppnade den (inte till dokumentets body).
4. Klick utanför modalen stänger den — valfritt beteende; inte alla modaler gör detta, men om din modal gör det måste den fortfarande fånga fokus medan den är öppen.
5. role="dialog" plus aria-modal="true" på modalelementen, med aria-labelledby pekande på modalens rubrik.

Implementeringar

Det mest citerade biblioteket är focus-trap (npm: focus-trap, focus-trap-react, focus-trap-vue) — litet, utan beroenden, hanterar alla kantfall (hoppar över osynliga element, integrerar med inert, återställer fokus vid stängning).

Den moderna webbläsarprimitiven är <dialog> med dialog.showModal(), som automatiskt fångar fokus och hanterar Escape. Webbläsarstödet är nu tillräckligt starkt för att använda detta som baslinje.

Antimönster: fällan som inte släpper

En fokusfälla måste frigöras när modalen stängs. Det vanligaste implementeringsfeletet är att glömma att återställa fokus till det ursprungliga utlösarelementet — fokus hamnar då på dokumentets body, vilket skärmläsare annonserar som ingenting. Användaren tappas in i tystnad och måste börja tabba från sidans topp.