Hva kreves i praksis?
Tastaturfokus skal være synlig. Brukeren skal alltid se hvilket interaktivt element som er aktivt. Kravet gjelder sider som brukes i Norge, uavhengig av om du er offentlig virksomhet, butikk eller byrå som leverer nettsiden.
Vanlige feil og avvik
- Global CSS med outline: none eller outline: 0 uten erstatning.
- Fokusring med for lav kontrast (under 3:1).
- Fokus som dekkes av sticky header.
Før og etter — kodeeksempler
Eksemplene er forenklet. Lim inn mønsteret, ikke nødvendigvis klassenavnene, i din egen kodebase.
Feil kode — bryter WCAG
outline: none fjerner nettleserens fokus uten å gi en ny, synlig indikator.
Feil eksempel
button, a, input { outline: none; }Riktig kode — utbedret
Behold eller erstatt fokus med en ring som har minst 3:1 mot bakgrunnen. :focus-visible unngår ring ved museklikk.
Riktig eksempel
button:focus-visible,
a:focus-visible,
input:focus-visible {
outline: 2px solid #1f4d3a;
outline-offset: 2px;
}Hvordan UUvakta tester dette
Synlig fokus er delvis automatisk. UUvakta fanger relaterte tastatur- og kontrastfunn, og Companion unngår å innføre outline:none uten ring. En manuell Tab-runde på malene er likevel den sikreste testen — og det tilsynet ofte gjør.