Fokus

Fokus är tillståndet att vara den aktiva mottagaren av tangentbordsinmatning. Bara ett element på en sida kan ha fokus vid varje givet ögonblick, och den visuella indikatorn för det tillståndet — fokusringen — är den viktigaste affordansen för tangentbords-, switch- och skärmläsaranvändare.

Varför fokus spelar roll

En betydande andel användare navigerar webben helt utan mus:

• Tangentbordsanvändare med motoriska funktionsnedsättningar som gör pekande svårt eller omöjligt.
• Switch-inmatningsanvändare som skannar gränssnitt via en knapp eller sip-and-puff-enheter.
• Skärmläsaranvändare, som routar via tangentbordsgränssnittet även på pekskärmar.
• Röststyrningsanvändare (“Klicka på Skicka-knappen”) vars verktyg löser kommandon genom att matcha fokusbara element.

För alla dessa är fokus markören. Var fokus befinner sig, vart det ska härnäst och hur det ser ut avgör om sidan är användbar överhuvudtaget.

WCAG:s fokusregler

WCAG 2.x och 2.2 innehåller flera kriterier centrerade på fokus:

• 2.1.1 Tangentbord (A) — all funktionalitet måste vara möjlig att använda från tangentbordet.
• 2.1.2 Ingen tangentbordsfälla (A) — tangentbordsanvändare måste kunna flytta fokus bort från alla fokusbara element med enbart tangentbordet.
• 2.4.3 Fokusordning (A) — fokusordningen måste vara logisk och meningsfull.
• 2.4.7 Fokus synligt (AA) — det fokuserade elementet måste ha en synlig indikator.
• 2.4.11 Fokus inte dolt (AA, nytt i WCAG 2.2) — fasta sidhuvuden, kakorbanners och flytande chatwidgetar får inte helt dölja ett fokuserat element.
• 2.4.13 Fokusutseende (AAA, nytt i 2.2) — fokusindikatorn måste uppfylla specifika krav på yta och kontrast.

Vanliga felmönster

• outline: none utan ersättning. Designers tar bort standardringen för att den inte passar den visuella stilen och glömmer att ersätta den med en stiliserad variant. Detta är ett Level AA-fel och det vanligaste av dem alla.
• Fokus bara på :focus-visible, inte :focus. Modern bästa praxis använder :focus-visible så att ringen bara visas vid tangentbordsnavigering, inte musklick. Det är rätt — men indikatorn på :focus-visible måste fortfarande uppfylla AA-kontrastkravet.
• Förlorat fokus efter dynamiska åtgärder. När en modal stängs måste fokus återvända till utlösarelementet. När en rad raderas måste fokus flytta till ett rimligt grannelelement. Annars hamnar användaren på ett godtyckligt ställe (ofta dokumentets body) och måste börja tabba från sidans topp.
• Fokus dolt under fastpinnat chrome. En fokuserad länk 50 pixlar från sidans topp hamnar bakom ett fastpinnat sidhuvud som också är 50 pixlar högt. Användaren tabbar sig in i skenbar tomhet. Ange scroll-padding-top lika med sidhuvudets höjd, eller detektera överlappningen och scrolla det fokuserade elementet till synes.

Den snabbaste manuella granskningen

Tabba igenom varje sida från adressfältet till sidfoten. Om du vid något tillfälle inte kan se var fokus är, inte kan nå en interaktiv kontroll, eller fastnar i en fokusfälla, misslyckas sidan med 2.4.7 eller 2.1.2.