Flyt fokus til den første fejl
Led brugerne direkte til det, de skal rette.
Flyt fokus til den første fejl er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 3 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.
Glemt efter afsendelse
En bruger sender formularen, siden viser fejl øverst, men fokus bliver på knappen. Brugeren aner ikke, at noget mislykkedes. 😕
Send fokus til problemet
Ved en mislykket afsendelse skal du flytte fokus til det første ugyldige felt. Brugeren lander præcis dér, hvor rettelsen begynder, uden at skulle lede.
Brug focus i JS
Find det første kontrolfelt, der fejler, og kald focus() på det. Nu starter både tastaturbrugere og skærmlæserbrugere det rigtige sted.
const first = form.querySelector("[aria-invalid='true']");
if (first) first.focus();Læs navn, type og fejl
Når fokus lander dér, annoncerer skærmlæseren feltets navn, at det er ugyldigt, og den beskrevne fejl på én gang.
Det første, ikke et tilfældigt
Målret altid den første fejl i dokumentrækkefølgen. Hvis du springer til et senere felt, overser du problemer, som brugeren stadig skal løse.
Du skal ikke bare rulle
Det hjælper musens brugere at rulle fejlen ind i visningen, men tastatur- og skærmlæserbrugere har brug for, at det rigtige fokus flyttes, ikke bare at nogle pixels flyttes.
En opsummeringsboks hjælper
Ved mange fejl skal du først flytte fokus til en fejlopsummering øverst. Oplist hvert problem som et link, der springer til det tilhørende felt.
<div tabindex="-1" id="errors">
3 errors found
</div>Gør opsummeringen fokuserbar
En overskrift eller div kan ikke som standard modtage fokus. Tilføj tabindex="-1", så dit script programmatisk kan flytte fokus til den.
Forbind fejl med felter
I opsummeringen er hvert element et link til feltets id. Når brugeren aktiverer det, sendes fokus direkte til det fejlbehæftede input.
<a href="#email">Email is required</a>Undgå at stjæle fokus for tidligt
Flyt kun fokus som reaktion på brugerens submit, aldrig ved hvert tastetryk. Det virker forstyrrende og uvelkomment at rive fokus væk midt i indtastningen.
Bekræft, at problemet er løst
Når brugeren har rettet alt og sender formularen igen, skal du flytte fokus til en succesmeddelelse, så brugeren hører, at det endelig lykkedes.
Hurtigt tjek
Hvor skal fokus flyttes hen, når en formularafsendelse mislykkes?
Opsummering
Ved en fejl skal du flytte fokus til det første ugyldige felt eller en fokuserbar fejlopsummering, og til en succesmeddelelse, når formularen går igennem. ✅
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 “Flyt fokus til den første fejl” gratis?
Ja — hele teksten til “Flyt fokus til den første fejl” 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 “Flyt fokus til den første fejl”?
Led brugerne direkte til det, de skal rette. 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 3 af 4.
Hvor lang tid tager lektionen “Flyt fokus til den første fejl”?
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
- Knyt fejl til felter med aria-describedby
- Markér ugyldig tilstand med aria-invalid
- Flyt fokus til den første fejl
- Inline, ved fokusændring eller ved afsendelse: Tidspunktet er vigtigt