Begreber

Fokus-fælde

Det mønster, der holder tastatur-fokus inde i en modal dialog, mens den er åben — forhindrer Tab i at flygte tilbage til dokumentet bag ved, og genopretter fokus på det udløsende element, når dialogen lukkes.

En fokus-fælde er en bevidst begrænsning af tastaturnavigation: mens en modal dialog er åben, cirkulerer Tab kun mellem de fokuserbare elementer inde i dialogen. Shift+Tab går den modsatte vej. Brugeren kan ikke tabbe sig tilbage til siden bag modalen, før de eksplicit lukker den.

Fokus-fælder er påkrævet for tilgængelige modale dialoger. Uden dem lander brugere med tastatur og skærmlæser på usynligt sideindhold, de hverken kan se eller komme fri af.

Hvorfor det er nødvendigt

En modal dialog vises visuelt som et lag oven på siden. Intentionen er utvetydigt, at brugeren interagerer med modalen, indtil de er færdige, og derefter vender tilbage til siden. For mus-brugere er dette intuitivt: klik uden for modalen gør ingenting (eller lukker den); klik inden i modalen når modalens kontroller.

Uden en fokus-fælde oplever tastaturbrugere en inkonsekvent oplevelse:

  1. Modal åbner. Fokus flyttes til (eller bør flyttes til) det første fokuserbare element inden i.
  2. Brugeren trykker Tab. Fokus flyttes til det næste fokuserbare element inde i modalen.
  3. Brugeren fortsætter med at trykke Tab. Fokus når til sidst det sidste fokuserbare element inde i modalen.
  4. Ét Tab til. Uden en fælde hopper fokus til det næste fokuserbare element i dokumentet — et sted bag modalen, usynligt for brugeren.

Brugerens eneste signal om, at dette skete, er at modalens fokus-indikator forsvinder. De har ingen idé om, hvor deres fokus befinder sig.

Det fulde modale mønster

En komplet tilgængelig modal indeholder:

  1. Fokus flyttes ind i modalen, når den åbner — typisk til det første fokuserbare element eller til modalens overskrift (hvis overskriften har tabindex="-1" for programmatisk fokus).
  2. Fokus fanges inde i modalen: Tab fra det sidste element springer til det første; Shift+Tab fra det første springer til det sidste.
  3. Escape lukker modalen og returnerer fokus til det udløsende element, der åbnede den (ikke til dokumentets body).
  4. Klik uden for modalen lukker den — valgfær adfærd; ikke alle modaler gør dette, men hvis din modal gør det, skal den stadig fange fokus, mens den er åben.
  5. role="dialog" plus aria-modal="true" på modal-elementet, med aria-labelledby der peger på modalens overskrift.

Implementeringer

Det mest citerede bibliotek er focus-trap (npm: focus-trap, focus-trap-react, focus-trap-vue) — lille, uden afhængigheder, håndterer alle edge cases (springer usynlige elementer over, integrerer med inert, genopretter fokus ved lukning).

Den moderne browser-primitive er <dialog> med dialog.showModal(), som automatisk fanger fokus og håndterer Escape. Browser-understøttelsen er nu stærk nok til at bruge dette som baseline.

Anti-mønster: “fælden der ikke slipper”

En fokus-fælde skal frigives, når modalen lukkes. Den mest almindelige implementeringsfejl er at glemme at genoprette fokus på den originale udløser — fokus havner derefter på dokumentets body, som skærmlæsere annoncerer som ingenting. Brugeren efterlades i stilhed og er nødt til at begynde at tabbe fra toppen af siden.