Standarder · WCAG 2.2

SC 2.4.7 Niveau AA WCAG 2.0

Fokus synligt

Ethvert tastaturoperabelt interface skal have en synlig fokusindikator på det aktuelt fokuserede element. Kan en bruger ikke se, hvor tastaturets fokus er, kan de ikke bruge webstedet med tastatur. Et af de hyppigst citerede succeskriterier i audits.

Hvad det kræver

Når et interaktivt element modtager tastaturets fokus, skal browseren — eller sidens CSS — vise en synlig indikator, der viser, hvilket element der er fokuseret. Succeskriteriet dikterer ikke, hvordan indikatoren ser ud; det er 2.4.13’s opgave på AAA-niveau. Det kræver kun, at noget er synligt. Den klassiske fejl er *:focus { outline: none; } uden en erstatning.

Dette succeskriterium gælder for alt, der kan fokuseres: links, knapper, formularinput, brugerdefinerede widgets, iframes, alt med tabindex. Det gælder, uanset om brugeren nåede dertil via Tab, Shift+Tab eller et programmatisk fokuskald.

Sådan opfyldes det

  • Skriv aldrig outline: none (eller outline: 0) uden en øjeblikkelig erstatning. Brug :focus-visible til at begrænse din brugerdefinerede ring til tastaturbrugere, hvis du vil undertrykke den ved museklik.
  • Tilbyd en fokusstil med tilstrækkelig kontrast og tykkelse til at være tydelig: en 2px solid ring med 3:1 kontrast mod den tilstødende baggrund er den konservative baseline.
  • For lyse kontroller på en lys baggrund, brug en mørk ring (eller omvendt). En grå ring på grå hover-tilstand er den klassiske usynlighedsfælde.
  • Brugerdefinerede widgets (combobox, listbox, menu) skal flytte fokus til den aktive mulighed og vise en synlig indikator på den.
  • Test ved at tabbe igennem hele siden fra URL-linjen. Hvert stop skal være tydeligt uden at knibe øjnene.

Typiske fejl

  • Global nulstilling: *:focus { outline: none; } i basis-CSS’en, aldrig genindsat.
  • Komponentbiblioteker, der leveres med en 1px lavkontrastring, der matcher brandfarven mod en hero-gradient — usynlig i praksis.
  • Fokusindikator skjult bag en fastgjort header ved scroll (se 2.4.11 — samme rodårsag, andet succeskriterium).
  • Knapper, der skifter baggrundsfarve ved :hover, men ikke ved :focus, så tastaturbrugere ikke får noget signal.
  • Brugerdefinerede dropdowns, hvor fokus flyttes til et skjult offscreen-<li>, og intet ændres visuelt.
  • Designere erstatter ringen med en lille skygge, der er usynlig på urolige baggrunde.

Hvordan :focus-visible passer ind

Browsere eksponerer :focus-visible til at skelne tastaturets fokus fra musefokus. Mønster:

:focus { outline: none; }
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

Dette holder museklik rene og giver tastaturbrugere en indikator. Sikkert at levere i alle moderne browsere fra 2026.

Hvorfor det betyder noget

Fokus synligt er det hyppigst citerede succeskriterium i tastaturaudits og sandsynligvis det med størst effekt. Et websted, der fejler 2.4.7, er ubrugeligt med tastatur, selv hvis alle andre succeskriterier består. Brugere med motoriske handicap, synshæmmede brugere med forstørrelsesglas og brugere med håndskader mister alle adgang. Mobile tastaturbrugere (eksterne Bluetooth-tastaturer på tablets) møder den samme mur. At rette det er normalt én enkelt CSS-regel, hvilket gør, at fejlen fortsat eksisterer på tværs af nettet, endnu mere bemærkelsesværdig.