Frontend Academy · leksjon

Tastaturnavigasjon og fokusstyring

Sørg for at alle interaktive elementer kan nås med Tab, styr fokus programmatisk i dialoger og ved ruting, og lag synlige fokusindikatorer.

Leksjon 4 av 414 trinn

Tastaturnavigasjon og fokusstyring er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hvorfor tastaturnavigasjon er viktig

Mange brukere kan ikke bruke mus: personer med motoriske funksjonsnedsettelser, skjermleserbrukere og erfarne brukere som foretrekker tastaturet. Hvis appen din ikke kan navigeres med tastatur, fungerer den ikke for disse brukerne.

Tab og Shift+Tab

Tab flytter fokuset til neste interaktive element. Shift+Tab flytter det til det forrige. Rekkefølgen følger som standard DOM-rekkefølgen – ikke motarbeid dette; la DOM-en bestemme tab-rekkefølgen.

Hva som kan få fokus som standard

Innebygde interaktive elementer kan få fokus: a[href], button, input, select, textarea, summary. Egendefinerte elementer trenger tabindex.

Verdier for tabindex

tabindex="0": inkluderes i tab-rekkefølgen på DOM-posisjonen sin. tabindex="-1": kan bare få fokus via JS (skriptfokus, ikke Tab). tabindex=">0": et anti-mønster – skaper en forvirrende fokusrekkefølge og skal aldri brukes.

<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>

<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>

Synlig fokusindikator

Fjern aldri fokuskonturer uten å tilby en erstatning. WCAG krever en synlig indikator på alle elementer som kan få fokus.

/* BAD: hides focus for everyone */
*:focus { outline: none; }

/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:focus-visible

Pesudoklassen :focus-visible aktiveres bare når fokuset kommer fra tastaturet, ikke fra et museklikk. Dermed kan du beholde et ryddig utseende for mus samtidig som tastaturfokus vises.

Lenke for å hoppe til innholdet

Det første elementet som kan få fokus, bør være en hopp-lenke, slik at tastaturbrukere kan hoppe forbi navigasjonen i toppteksten direkte til hovedinnholdet.

<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>

/* CSS */
.skip-link {
  position: absolute; left: -10000px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: white; padding: 0.5rem 1rem;
}

Fokusfelle i modaler

Når en modal åpnes, bør fokuset holdes inne i den – Tab fra det siste elementet går tilbake til det første, og Shift+Tab fra det første går til det siste. Escape lukker modalen.

// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;

// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();

Bruk dialog-elementet

HTMLs innebygde <dialog> håndterer fokusfelle, lukking med Escape og modalbakgrunn automatisk.

<dialog id="signup">
  <h2>Sign up</h2>
  <form method="dialog">
    <input name="email" required>
    <button>Submit</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

<script>
  document.getElementById('signup').showModal(); // opens with focus trap
</script>

Fokushåndtering etter ruteendring

SPA-er laster ikke siden på nytt, så skjermleserbrukere får ingen signal om at navigeringen har skjedd. Flytt fokuset til den nye sidens h1 eller main når ruten endres.

// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();

Fokusrekkefølgen bør samsvare med den visuelle rekkefølgen

Sørg for at DOM-rekkefølgen samsvarer med den visuelle flyten. Hvis CSS endrer rekkefølgen på elementer (flex order, grid placement, position absolute), samsvarer ikke tab-rekkefølgen – noe som er forvirrende for alle.

Test ved å legge bort musen

Den mest nyttige tilgjengelighetstesten er å koble fra musen og prøve å bruke hele appen med Tab, Shift+Tab, Enter, Space og piltastene. Hvis du blir stående fast, blir brukerne dine også stående fast.

Rask kontroll

Hvilken CSS-pseudoklasse lar deg formatere fokuskonturen bare når fokuset kom fra tastaturet, og ikke fra et museklikk?

Besvar den i den interaktive leksjonen

Oppsummering: tastaturnavigasjon

Innebygde interaktive elementer kan få fokus som standard. Bruk tabindex=0 bare på egendefinerte komponenter; bruk aldri tabindex>0. Vis alltid fokus – bruk :focus-visible. Legg til en lenke for å hoppe til innholdet. Hold fokuset inne i modaler, og gjenopprett det når modalen lukkes. Bruk innebygd <dialog> når det er mulig. Flytt fokuset til h1/main når ruten endres. Test ved å legge bort musen.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Tastaturnavigasjon og fokusstyring» gratis?

Ja – hele teksten i «Tastaturnavigasjon og fokusstyring» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Tastaturnavigasjon og fokusstyring»?

Sørg for at alle interaktive elementer kan nås med Tab, styr fokus programmatisk i dialoger og ved ruting, og lag synlige fokusindikatorer. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Tastaturnavigasjon og fokusstyring»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Frontend Academy