Fokusudseende

Hvad kriteriet kræver

2.4.7 (Fokus synlig) siger, at indikatoren skal eksistere. 2.4.13 (Fokusudseende) siger præcist, hvordan den skal se ud. For at bestå skal fokusindikatoren:

1. Have et areal mindst svarende til en 2 CSS-pixel solid omkreds rundt om det fokuserede kontrolelement, eller en 1 px tyk linje med samme samlede areal.
2. Nå 3:1 kontrast mellem den fokuserede og ikke-fokuserede tilstand af de samme pixels.
3. Ikke være skjult af andet indhold (hvilket også dækkes af 2.4.11 / 2.4.12).

Dette er første gang, WCAG har sat tal på fokusstyling, og det har ændret, hvordan designsystemer håndterer tastaturstyling. Forvent, at alle tilgængeligheds-audits i 2026 vil nævne dette ved navn.

Sådan opfylder du det

• Brug en solid kontur på mindst 2 px tykkelse. Typisk mønster: outline: 2px solid currentColor; outline-offset: 2px;.
• Vælg en fokusfarve, der rammer 3:1 mod den tilstødende farve — ikke blot sidens baggrund — knapper sidder på hover-tilstande, gradienter, billeder.
• Til mørk tilstand og lys tilstand: ship to fokusfarver og skift dem via prefers-color-scheme eller token-theming.
• Undgå at stole på en glød eller box-shadow-ring med lavt kontrast; brug hård kant og tilstrækkelig tykkelse, hvis du bruger box-shadow.
• Foretrækkes :focus-visible, så musebrugere ikke ser ringen, men sørg for, at den aktiveres ved hvert tastaturfokus, inklusive programmatisk fokus.

:focus-visible {
  outline: 2px solid #1d4ed8;       /* 3:1 mod hvid og grå hover-tilstande */
  outline-offset: 2px;
  border-radius: inherit;
}

Typiske fejl

• 1 px fokusringe (de fleste browser-standarder fra komponentbiblioteker før 2023).
• Brand-blå fokusringe på en brand-blå knap hover-tilstand — farven er identisk, kontrast 1:1.
• Fokus kun stylet med en blød box-shadow uden defineret kant, der forsvinder mod mønstrede baggrunde.
• Brugerdefinerede inputs, hvor fokustilstanden kun ændrer kantefarven men ikke tykkelsen eller kontrasten — for subtil til at tælle.
• „Indsat“ fokusringe på små ikonknapper, der males inden for 16×16 hit-arealet og ender usynlige bag ikonglyffen.
• Komponenter, der består på hvide baggrunde, men fejler på den mørke-tilstands-variant ingen testede.

Praktisk kontrasttjekliste

For hvert interaktivt komponent skal du liste alle overflader, det kan sidde på (standard, hover, trykket, deaktiveret, i et kort, i en modal, på et herobilledet), og bekræfte, at fokusringen rammer 3:1 mod hver. Det er kedeligt; komponentbiblioteker, der ikke gør det, leveres med skjulte fejl. Storybook + pa11y eller axe-playwright-automatisering betaler sig her.

Hvorfor det er vigtigt

2.4.13 lukker den mest almindelige smuthul i 2.4.7: en fokusring, der teknisk set eksisterer, men er for tynd, for lav-kontrast eller for positionelt klippet til at være nyttig. Svagsynede brugere, der er afhængige af ringen til at spore fokus, får en målbar, testbar garanti. Designere får en klar regel, de kan validere inden levering frem for at forhandle om bagefter.

Selv teams, der formelt kun forpligter sig til AA, er i vid udstrækning ved at adoptere 2.4.13 som mål, fordi fejl er lette at se i audits og lette at bruge i søgsmål. Hvis du kun adopterer ét AAA-kriterium fra WCAG 2.2, er det dette.