HTML Academy · leksjon

Tastaturnavigasjon og fokuseringsrekkefølge

Sørg for at all funksjonalitet er tilgjengelig og logisk via tastaturet

Leksjon 4 av 413 trinn

Tastaturnavigasjon og fokuseringsrekkefølge er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Hvem trenger tastaturnavigasjon?

Mange brukere er avhengige av tastaturnavigasjon:

Motoriske funksjonsnedsettelser — kan ikke bruke mus
Erfarne brukere — foretrekker hurtigtaster
Skjermleserbrukere — navigerer utelukkende med tastaturet
Brukere av bryterstyring — bruker knapper som simulerer tastetrykk

Elementer som kan fokuseres naturlig

Disse HTML-elementene kan som standard fokuseres med tastaturet:

<a href> — Tab flytter fokus dit, Enter aktiverer det
<button> — Tab flytter fokus dit, Enter/mellomrom aktiverer det
<input>, <textarea>, <select> — Tab flytter fokus til dem
<details> / <summary> — Tab + Enter

Tab-rekkefølge

Nettleseren bestemmer tab-rekkefølgen slik:

DOM-rekkefølgen som standard — elementene får fokus i den rekkefølgen de vises i HTML
Positive tabindex-verdier — disse elementene får fokus først, i stigende rekkefølge
tabindex="0" — legges til i den naturlige tab-rekkefølgen på sin plass i DOM-en
tabindex="-1" — er ikke med i tab-rekkefølgen; kan bare fokuseres med skript

Naturlig tab-rekkefølge = DOM-rekkefølge

Leserekkefølgen i HTML-en bør samsvare med det visuelle oppsettet:

<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- BAD: visually reordered with CSS, DOM order broken:
     CSS flexbox order: doesn't affect tab order!
     Screen readers and keyboard users follow DOM order, not CSS order -->

Synlig fokusindikator

WCAG 2.4.7 (nivå AA): Tastaturfokus må være synlig:

/* NEVER do this: */
* { outline: none; }           /* removes all focus outlines */

/* GOOD: styled focus indicator: */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* :focus-visible shows outline for keyboard only
   mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */

Egendefinerte fokusstiler

Fokusstiler i designsystemet:

/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}

/* Always ensure 3:1 contrast ratio between
   focus indicator and background (WCAG 2.4.11 Level AA) */

Logisk fokusrekkefølge

Fokusrekkefølgen bør være logisk og forutsigbar — WCAG 2.4.3 (nivå A):

<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->

<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->

Hopp-lenker

Hopp-lenker lar tastaturbrukere hoppe over gjentakende navigasjon:

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

<!-- Visually hidden until focused: -->
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #0070f3;
  color: white;
  padding: 0.75rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;  /* visible when focused -->
}

Fokusfelle i modaler

Modale vinduer må holde fokuset inne i vinduet mens de er åpne:

<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->

const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');

function openModal() {
  modal.removeAttribute('hidden');
  modal.querySelector('button, [tabindex="0"]').focus();
}

function closeModal() {
  modal.setAttribute('hidden', '');
  trigger.focus();
}

Hurtigtaster

Implementer hurtigtaster med hendelseslyttere:

document.addEventListener('keydown', (e) => {
  // Close modal on Escape:
  if (e.key === 'Escape') closeModal();

  // Navigate tabs with arrow keys:
  if (e.key === 'ArrowRight') focusNextTab();
  if (e.key === 'ArrowLeft') focusPrevTab();

  // Submit form on Enter (default behavior in inputs):
  // Nothing needed — browser handles this
});

Teste tastaturnavigasjon

Slik tester De tilgjengelighet med tastatur:

Legg bort musen og bruk bare tastaturet
Trykk på Tab — kommer De til alle interaktive elementer?
Er fokusindikatoren alltid synlig?
Gir tab-rekkefølgen logisk mening?
Kan De bruke alle funksjonene (skjemaer, modaler, rullegardinmenyer) uten mus?
Trykk på Shift+Tab for å navigere bakover

Kunnskapssjekk

Hvilken CSS-egenskap bør De aldri fjerne fra alle elementer når De skal sikre tastaturtilgjengelighet?

Besvar den i den interaktive leksjonen

Oppsummering: Tastaturnavigasjon

Det viktigste om tilgjengelighet med tastatur:

Alle interaktive elementer må kunne nås med Tab
DOM-rekkefølge = tab-rekkefølge — samsvar med det visuelle oppsettet
Fjern aldri fokusomriss — bruk :focus-visible for egendefinerte stiler
Hopp-lenker gjør det mulig å hoppe over gjentakende navigasjon
Bruk fokusfelle i modaler, og før fokuset tilbake når de lukkes
Test ved å bruke nettstedet med bare tastaturet

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: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Tastaturnavigasjon og fokuseringsrekkefølge» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Tastaturnavigasjon og fokuseringsrekkefølge», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Tastaturnavigasjon og fokuseringsrekkefølge»?

Sørg for at all funksjonalitet er tilgjengelig og logisk via tastaturet Du øver på HTML 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 HTML Academy?

Ingen tidligere erfaring er nødvendig. HTML 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 fokuseringsrekkefølge»?

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 HTML Academy-leksjonen?

Ja. Alle HTML 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

Hvorfor tilgjengelighet er viktig og WCAG-nivåer
Overskriftshierarki for skjermlesere
Alternativ tekst for bilder når og hvordan
Tastaturnavigasjon og fokuseringsrekkefølge

← Tilbake til HTML Academy