Fokus synligt

Vad det kräver

Närhelst ett interaktivt element tar emot tangentbordsfokus måste webbläsaren — eller sidans CSS — rendera en synlig indikator som visar vilket element som är fokuserat. Framgångskriteriet bestämmer inte hur indikatorn ska se ut; det är 2.4.13:s uppgift på AAA-nivå. Det kräver bara att något är synligt. Det klassiska misslyckandet är *:focus { outline: none; } utan ersättning.

Detta framgångskriterium gäller allt som kan fokuseras: länkar, knappar, formulärfält, anpassade widgetar, iframes, allt med tabindex. Det gäller oavsett om användaren nådde det via Tab, Skift+Tab eller ett programmatiskt fokusanrop.

Hur man uppfyller det

• Skriv aldrig outline: none (eller outline: 0) utan en omedelbar ersättning. Använd :focus-visible för att begränsa din anpassade ring till tangentbordsanvändare om du vill dölja den vid musklick.
• Tillhandahåll en fokusstil med tillräcklig kontrast och tjocklek för att vara tydlig: en 2px solid ring med 3:1 kontrast mot angränsande bakgrund är den konservativa baslinjen.
• För ljusa kontroller mot ljus bakgrund, använd en mörk ring (eller vice versa). En grå ring mot ett grått hoverstillstånd är den klassiska osynlighetsfällan.
• Anpassade widgetar (combobox, listbox, meny) måste flytta fokus till det aktiva alternativet och rendera en synlig indikator på det.
• Testa genom att tabba igenom hela sidan från URL-fältet. Varje stopp måste vara tydligt utan att kisa.

Vanliga misslyckanden

• Global återställning: *:focus { outline: none; } i bas-CSS, aldrig återlagd.
• Komponentbibliotek som levereras med en 1px lågkontrastram som matchar varumärkesfärgen mot en hjälte-gradient — osynlig i praktiken.
• Fokusindikator dold bakom ett klibbigt sidhuvud vid scrollning (se 2.4.11 — samma grundorsak, annat framgångskriterium).
• Knappar som ändrar bakgrundsfärg vid :hover men inte vid :focus, så tangentbordsanvändare får ingen signal alls.
• Anpassade rullgardinsmenyer där fokus flyttas till ett dolt offscreen <li> och inget förändras visuellt.
• Designer som ersätter ringen med en liten skugga som är osynlig mot röriga bakgrunder.

Hur :focus-visible passar in

Webbläsare exponerar :focus-visible för att skilja tangentbordsfokus från musfokus. Mönster:

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

Detta håller musklick rent och ger tangentbordsanvändare en indikator. Säkert att leverera i alla moderna webbläsare från och med 2026.

Varför det spelar roll

Fokus synligt är det mest citerade framgångskriteriet i granskningar av tangentbordstillgänglighet — och troligen det med störst inverkan. En webbplats som misslyckas med 2.4.7 är oanvändbar med tangentbord, även om alla andra framgångskriterier uppfylls. Användare med motoriska funktionsnedsättningar, synskadade användare som kör förstoringsverktyg och användare med handskador förlorar alla åtkomst. Mobila tangentbordsanvändare (externa Bluetooth-tangentbord på surfplattor) stöter på samma hinder. Att åtgärda det är vanligtvis en enda CSS-regel, vilket gör att felet kvarstår på webben desto mer anmärkningsvärt.