Navigation mellem faner med piletaster
Lad brugerne flytte mellem faner med tastaturet.
Navigation mellem faner med piletaster 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.
Faner kan ikke kun klikkes på
Et korrekt fanesæt styres med tastaturet, ikke kun musen. APG-mønsteret forventer, at piletaster flytter mellem fanerne.
Tablist er ét tabulatorstop
Et tryk på Tab bør lande på fanesættet én gang, ikke stoppe på hver fane. Hele tablist opfører sig som ét stop i sidens rækkefølge.
Kun én fane kan tabuleres til
Giv den aktive fane tabindex="0" og alle andre faner tabindex="-1". Dette er den glidende tabindex, som forhindrer Tab i at ramme dem alle.
<button role="tab" tabindex="0">Profile</button>Piletaster flytter fokus
I en vandret tablist flytter højre- og venstrepilene fokus fra fane til fane. Sådan udforsker tastaturbrugere sættet.
Op og ned til lodrette faner
Hvis dine faner står lodret, skal du i stedet bruge op- og nedpilene. Sæt aria-orientation="vertical", så hjælpemidler kender layoutet.
<div role="tablist" aria-orientation="vertical">...</div>Lav en løkke ved enderne
Når fokus er på den sidste fane, og brugeren trykker på den næste pil, skal du gå tilbage til den første. Løkker gør navigationen jævn og forudsigelig.
Home og End springer langt
Tilføj to genveje: Home flytter fokus til den første fane, og End flytter det til den sidste. Lange fanesæt bliver meget hurtigere at navigere i.
Flyt den roterende indeksmarkør
Når en pil flytter fokus, skal du opdatere tabindex: sæt den fane, der har fået fokus, til 0 og den gamle til -1, og kald derefter focus på den.
newTab.tabIndex = 0; oldTab.tabIndex = -1; newTab.focus();Automatisk aktivering
Ved automatisk aktivering vælges en fane og dens panel vises, når fanen får fokus. Det føles øjeblikkeligt, men kan være tungt, hvis panelerne er ressourcekrævende.
Manuel aktivering
Ved manuel aktivering flytter piletasterne kun fokus; brugeren trykker på Enter eller Space for at vælge. Foretræk dette, når det er ressourcekrævende at vise et panel.
Derfor er det vigtigt
Uden understøttelse af piletaster skal tastaturbrugere tabbe gennem hver fane og hvert panel. Korrekt tastaturhåndtering gør komponenten effektiv, ikke bare tilgængelig.
Hurtigt tjek
Fokus er på en fane i en vandret fanebjælke. Brugeren trykker på højre pil. Hvad skal der ske?
Opsummering: Navigation med piletaster
Du har lært, at faner bruger en roterende tabindex sammen med piletaster samt Home og End. Vælg automatisk eller manuel aktivering ud fra panelets omkostning.
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 “Navigation mellem faner med piletaster” gratis?
Ja — hele teksten til “Navigation mellem faner med piletaster” 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 “Navigation mellem faner med piletaster”?
Lad brugerne flytte mellem faner med tastaturet. 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 “Navigation mellem faner med piletaster”?
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
- Fane-mønsteret: tablist, tab, tabpanel
- Navigation mellem faner med piletaster
- Accordions med Button og aria-expanded
- Udfoldning eller faner: Vælg det rigtige