Hopp til hovedinnhold
UUKontroll logo UUKontroll

Gjør tastaturfokus synlig (WCAG 2.4.7)

Alle interaktive elementer må ha en tydelig, synlig fokusindikator når de navigeres med tastatur.

wcag niva-aa navigasjon design

Forestill deg at du navigerer en nettside med tastaturet. Du trykker Tab for å flytte mellom knapper og lenker, men du kan ikke se hvor fokuset er. Det er ingen markering, ingen ramme, ingen indikasjon på hvilket element som er aktivt. Du trykker Enter og håper du treffer riktig. Dette er hverdagen for tastaturbrukere på nettsider der fokusindikatoren er fjernet uten å bli erstattet.

Hva sier kravet?

WCAG 2.4.7 «Synlig fokus» er et nivå AA-krav som sier at brukergrensesnittet skal ha en visuell indikator som viser hvilket element som har tastaturfokus. Enkelt sagt: når en bruker navigerer med Tab-tasten, skal de alltid kunne se hvor de er.

Nettlesere har en innebygd fokusindikator - vanligvis en blå eller svart ramme rundt det fokuserte elementet. Denne fungerer som standard uten at du trenger å gjøre noe. Problemet oppstår når utviklere eller designere aktivt fjerner den.

Kravet spesifiserer ikke nøyaktig hvordan fokusindikatoren skal se ut, men WCAG 2.4.11 (nivå AA i WCAG 2.2) stiller mer detaljerte krav til kontrastforhold og størrelse. For WCAG 2.4.7 er hovedpoenget at det må finnes en synlig indikator.

Hvorfor er dette viktig?

Fokusindikatoren er for tastaturbrukere det musepekeren er for musebrukere. Uten den er navigasjon blind gjetting. Dette rammer:

  • Brukere med motoriske funksjonsnedsettelser som navigerer utelukkende med tastatur eller bryterstyring
  • Svaksynte brukere som bruker forstørrelsesprogramvare og trenger en tydelig markør for å finne fokusert element i det forstørrede bildet
  • Skjermleserbrukere som kombinerer auditiv tilbakemelding med visuell fokusindikator
  • Avanserte brukere som foretrekker tastaturnavigasjon for effektivitet - utviklere, kontorarbeidere, journalister

Fjerner du fokusindikatoren, fjerner du i praksis navigasjonsmuligheten for alle som ikke bruker mus. Det er som å fjerne musepekeren fra skjermen - teknisk sett fungerer musen fortsatt, men du vet ikke hvor den peker.

For bedrifter handler det også om lovkrav. Norske virksomheter må dokumentere tilgjengelighet i tråd med gjeldende lovverk, og synlig fokus er et sentralt krav i praktisk tilsyn og kvalitetssikring. Manglende fokusindikator er et direkte brudd som tilsynsmyndighetene ser etter.

Slik oppfyller du kravet

Slutt å fjerne outline

Den aller vanligste årsaken til manglende fokusindikator er denne CSS-regelen:

/* FEIL: Fjerner fokusindikator for alle elementer */
*:focus {
  outline: none;
}

/* Eller dette, som også fjerner fokusindikatoren */
a:focus, button:focus, input:focus {
  outline: 0;
}

Denne regelen er ekstremt vanlig i CSS-resetter og i designsystemer der noen syntes den blå ringen var «stygg». Løsningen er ikke å fjerne den - det er å erstatte den med noe bedre.

Bruk :focus-visible

CSS-pseudoklassen :focus-visible er den moderne løsningen. Den viser fokusindikatoren kun når brukeren navigerer med tastatur, ikke ved museklikk. Dette gir det beste fra to verdener - tastaturbrukere ser fokus, musebrukere slipper ringen:

/* Fjern standard outline for museklikk */
:focus:not(:focus-visible) {
  outline: none;
}

/* Vis tydelig fokusindikator for tastaturnavigasjon */
:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
}

:focus-visible støttes av alle moderne nettlesere. Det er den anbefalte tilnærmingen i 2026.

Design en god fokusindikator

En effektiv fokusindikator bør være tydelig uansett bakgrunnsfarge. Her er noen teknikker:

/* Metode 1: Dobbel ring for god kontrast på alle bakgrunner */
:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px white;
}

/* Metode 2: Mørk ring med lys ytre ramme */
:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #93c5fd;
}

/* Metode 3: Tilpasset for mørk bakgrunn */
.dark-section :focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 2px;
}

En dobbel-ring-teknikk (mørk ring + lys skygge, eller omvendt) sikrer at fokusindikatoren er synlig uansett om bakgrunnen er lys eller mørk.

Tilpass for ulike elementtyper

Ulike elementer kan trenge ulik fokusstyling:

/* Knapper og lenker */
button:focus-visible,
a:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Tekstfelter - bruk border i stedet for outline for bedre utseende */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: #1a56db;
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.3);
}

/* Kort og større klikkbare områder */
.card:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 4px;
  border-radius: 8px;
}

Sjekk at fokusindikatoren har nok kontrast

WCAG 2.4.11 (fra WCAG 2.2) krever at fokusindikatoren har et kontrastforhold på minst 3:1 mot den tilliggende bakgrunnen. Dette betyr at en lysegrå ring på hvit bakgrunn ikke er tilstrekkelig:

/* FEIL: For lav kontrast mot hvit bakgrunn */
:focus-visible {
  outline: 2px solid #cccccc; /* 1.6:1 kontrast mot hvit */
}

/* RIKTIG: God kontrast mot hvit bakgrunn */
:focus-visible {
  outline: 3px solid #1a56db; /* 7.1:1 kontrast mot hvit */
  outline-offset: 2px;
}

Test grundig

Naviger gjennom hele nettsiden med bare Tab-tasten. For hvert element du fokuserer:

  1. Kan du se hvor fokuset er?
  2. Er fokusindikatoren tydelig nok til å skille seg ut?
  3. Fungerer den på alle bakgrunnsfarger?
  4. Forsvinner den når du scroller?

Test også i ulike nettlesere - fokusindikatoren kan se forskjellig ut i Chrome, Firefox og Safari.

Vanlige feil

  • outline: none eller outline: 0 uten erstatning - den aller vanligste feilen, ofte arvet fra CSS-resetter
  • Fokusindikator med for lav kontrast - lysegrå ring på hvit bakgrunn er nesten usynlig
  • Fokusindikator som forsvinner bak andre elementer - overflow: hidden på foreldreelementer kan klippe fokusringen
  • Ulik eller manglende fokusindikator i ulike komponenter - designsystemet håndterer det for noen elementer, men ikke alle
  • Fokusindikator bare på noen elementtyper - knapper har fokus, men lenker eller skjemaelementer mangler den
  • Tredjepartskomponenter som fjerner fokus - chat-widgets, datovalgverktøy og innebygde skjemaer med egne stiler som overstyrer fokusindikatoren

Synlig fokus koster nesten ingenting å implementere. Et par linjer CSS kan gjøre forskjellen mellom et nettsted som er brukbart med tastatur og et som er det umulig å navigere. Start med å søke etter outline: none i CSS-filene dine - sjansen er stor for at du finner roten til problemet der.