Fokusutseende

Vad kriteriet kräver

2.4.7 (Fokus synligt) säger att indikatorn måste finnas. 2.4.13 (Fokusutseende) säger exakt hur den måste se ut. För att klara kriteriet måste fokusindikatorn:

1. Ha en yta minst lika stor som en 2 CSS-pixlar solid kontur runt den fokuserade kontrollen, eller en 1 px tjock linje av samma totala yta.
2. Uppnå 3:1 kontrast mellan det fokuserade och ofokuserade tillståndet för samma pixlar.
3. Inte vara dold bakom annat innehåll (vilket också täcks av 2.4.11 / 2.4.12).

Det är första gången WCAG har satt siffror på fokusstyling, och det har omformat hur designsystem hanterar tangentbordsstilar. Förvänta dig att varje tillgänglighetsrevision 2026 namnger detta kriterium.

Hur du uppfyller det

• Använd en solid kontur på minst 2 px tjocklek. Vanligt mönster: outline: 2px solid currentColor; outline-offset: 2px;.
• Välj en fokusfärg som uppnår 3:1 mot den intilliggande färgen, inte bara sidbakgrunden — knappar sitter på hoverstates, gradienter, bilder.
• För mörkt läge och ljust läge skickar du med två fokusfärger och byter via prefers-color-scheme eller token-tematisering.
• Undvik att förlita dig på ett glöd- eller box-shadow-ring med låg kontrast; om du använder box-shadow ger du den en hård kant och tillräcklig tjocklek.
• Föredra :focus-visible så att musanvändare inte ser ringen, men se till att den aktiveras vid allt tangentbordsfokus, inklusive programmatiskt fokus.

:focus-visible {
  outline: 2px solid #1d4ed8;       /* 3:1 mot vitt och grå hoverstates */
  outline-offset: 2px;
  border-radius: inherit;
}

Vanliga fel

• 1 px fokusringar (de flesta webbläsarstandarder i komponentbibliotek före 2023).
• Varumärkesblå fokusringar på en varumärkesblå knapp-hoverstate — identisk färg, kontrast 1:1.
• Fokus stylat enbart med en mjuk box-shadow utan definierad kant som försvinner mot mönstrade bakgrunder.
• Anpassade inmatningsfält där fokustillståndet bara ändrar kantkärg men inte tjocklek eller kontrast — för subtilt för att räknas.
• “Inset”-fokusringar på små ikonknappar som ritas inuti 16×16-klickområdet och slutar osynliga bakom ikonglyfen.
• Komponenter som klarar sig på vita bakgrunder men underkänns i mörkt läge som ingen testade.

Praktisk kontrastchecklista

För varje interaktiv komponent listar du alla ytlägen den kan befinna sig på (standard, hover, nedtryckt, inaktiverad, i ett kort, i en modal, på en hjältebild) och verifierar att fokusringen uppnår 3:1 mot var och en. Det är omständligt; komponentbibliotek som inte gör det levererar med dolda fel. Storybook + pa11y eller axe-playwright-automatisering lönar sig här.

Varför det spelar roll

2.4.13 stänger det vanligaste kryphålet i 2.4.7: en fokusring som tekniskt sett finns men är för tunn, för lågkontrast eller för positionellt klippt för att vara användbar. Användare med nedsatt syn som förlitar sig på ringen för att följa fokus får en mätbar, testbar garanti. Designers får en tydlig regel de kan validera innan lansering snarare än förhandla om efteråt.

Även team som formellt åtar sig enbart AA anammar i stor utsträckning 2.4.13 som mål, eftersom felen är lätta att hitta i revisioner och lätta att använda i rättsprocesser. Om du bara antar ett AAA-kriterium från WCAG 2.2 är detta det.