Fasthold fokus i modalen
Forhindr Tab i at slippe ud til siden bagved.
Fasthold fokus i modalen er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Web Accessibility Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Derfor skal fokus blive inde
Mens en modal er åben, skal tastaturets fokus blive inde i den. Hvis Tab slipper ud til siden bagved, farer blinde brugere vild i indhold, de ikke kan se.
Det native element hjælper
En ægte dialog, der åbnes med showModal(), fastholder automatisk fokus for dig. Det er en vigtig grund til at foretrække den frem for en div.
Når du bygger din egen
Hvis du bygger en brugerdefineret modal med en div, skal du selv fastholde fokus, fordi intet forhindrer Tab i at slippe ud på siden.
Flyt fokus ind ved åbning
Flyt først fokus ind i modalen, når den åbnes, normalt til den første kontrol eller overskriften, så brugeren starter det rigtige sted.
modal.querySelector('button').focus();Find de elementer, der kan få fokus
Saml modalens fokuserbare elementer: links, knapper, inputfelter og alt med tabindex. Du skal bruge det første og sidste for at bygge løkken.
modal.querySelectorAll('a, button, input, [tabindex]');Lav en løkke fra sidste til første
Når der trykkes på Tab på det sidste element, skal du flytte fokus tilbage til det første. Så føres brugeren rundt i stedet for ud.
if (e.key==='Tab' && !e.shiftKey && active===last){
e.preventDefault(); first.focus();
}Lav en løkke fra første til sidste
Håndter også Shift+Tab på det første element: flyt fokus til det sidste, så baglæns tabulering også forbliver fastholdt.
if (e.key==='Tab' && e.shiftKey && active===first){
e.preventDefault(); last.focus();
}Forhindr standardhandlingen for Tab
Ved kanterne skal du kalde preventDefault(), ellers flytter browseren fokus ud, før din kode kan omdirigere det.
e.preventDefault();Vær opmærksom på deaktiverede og skjulte elementer
Spring elementer over, der er disabled eller skjulte, når du vælger det første og sidste, eftersom de faktisk ikke kan modtage fokus.
Glem ikke baggrunden
At fastholde fokus skal kombineres med at gøre siden bagved inert, så selv et fejlagtigt klik eller en skærmlæser ikke kan nå den, mens modalen er åben.
Test det med tastaturet
Tab gennem hele modalen, og se, at fokusrammen løber rundt uden nogensinde at forlade den. Den rundtur beviser, at fastholdelsen virker. ✅
Hurtigt tjek
Du har bygget en brugerdefineret div-modal. Hvad skal du gøre for at holde Tab inde i den?
Opsummering: Hold fokus fastholdt
Du har lært at flytte fokus ind ved åbning og lave en løkke ved begge kanter, så tastaturbrugere bliver i modalen, indtil de vælger at lukke den. 🎯
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Fasthold fokus i modalen” gratis?
Ja — hele teksten til “Fasthold fokus i modalen” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Web Accessibility Academy-kurset, skal du opgradere til CoddyKit PRO. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Fasthold fokus i modalen”?
Forhindr Tab i at slippe ud til siden bagved. Du øver dig i Web Accessibility Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Web Accessibility Academy?
Der kræves ingen tidligere erfaring. Web Accessibility Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Fasthold fokus i modalen”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Web Accessibility Academy-lektion?
Ja. Alle Web Accessibility Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Dialogroller og det indbyggede dialog-element
- Fasthold fokus i modalen
- Escape for at lukke og gendanne fokus
- Inaktiv baggrund og aria-modal