Fokusmarkering

I detta dokument så går vi igenom krav och tips om fokusmarkeringar utifrån ett tillgänglighetsperspektiv.

Källa:

Understanding Success Criterion 2.4.13: Focus Appearance | WAI | W3C

Riktlinje 2.4.11 tillhör WCAG2.2 som än idag står som utkast, det vill säga att det kan komma förändringar i dokumentet innan WCAG 2.2 publiceras. Men det är ändå viktiga riktlinjer att ha i åtanke eftersom det inom kort kommer bli ett krav med AA-nivå som behöver uppnås.

Vad är fokusmarkering?

Den som navigerar med t.ex. tab-tangenten behöver förstå vart på sidan de befinner sig. Med hjälp av en fokusmarkering så läggs det då exempelvis en ram runt de interaktiva elementet som användaren står på och där med så kan användaren tydligt se vart de befinner sig på sidan och när de tabbar sig vidare. Det ska finnas fokusmarkeringar på alla interaktiva element, alla element som kan nås med tangentbord och kan trigga någon form av händelse.

Vad bör man tänka på när man gör fokusmarkeringar?

Standard utseendet för fokusramar i olika webbläsare kan vara svåra att se. Ofta så ligger fokusramen tätt inpå komponenten och kan ha en färg som matchar komponentens/interaktiva elementet vilket gör det svårt för användaren att förstå vart fokuset ligger. Eller så är fokusramen alldeles för ljus mot vit bakgrund så det inte går för användare med nedsatt syn att urskilja den.
Därför rekommenderas det att göra fokusmarkeringen tydlig med hjälp av CSS (WCAG-2.4.7).

Personer med nedsatt syn har ofta svårt att urskilja visuella kontraster mellan exempelvis en symbol och dess bakgrund, se därför till att det är tillräckligt stark kontrast mellan fokusmarkeringar och dess bakgrund eller komponent/interaktiva elementet den omger. Den ska uppnå minst 3.0:1 i kontrastvärde (WCAG-1.4.11).

Viktigt att tänka på: Fokusmarkeringar ska ha bra kontrast mot bakgrunden men det är viktigt att se till att den även har bra kontrast mot det interaktiva elementet som fokusramen ligger runt.

Olika sätt att göra fokusmarkeringar

För att se till att fokusramen har både tillräcklig kontrast mot bakgrund och det interaktiva elementet så är ett exempel att se till att de finns ett litet mellanrum mellan elementet och fokusramen. Det blir lättare att se och då gör det inte heller något om fokusramen har en snarlik färg som komponenten eftersom den då jämförs mot bakgrunden istället (förutsatt att kontrastvärdet är tillräckligt starkt mot bakgrunden).

Om ni vill exempelvis att en knapp som får fokus ska ändrar sin ifyllnadsfärg istället för att lägga en ram runt den så måste den färgen som indikerar fokus också ha tillräckligt hög kontrast mot bakgrunden men det ska också vara tillräckligt hög kontrast mellan texten på knappen och dess ifyllnadsfärg. Den ska dessutom ha en kontrastskilland så det går att urskilja den fokuserade knappen från andra knappar intill som inte har fokus. Om den enbart är några nivåer ljusare eller mörkare så kan det vara svårt för användaren att urskilja vilken knapp som har fokus.

Undvik att använda en tunn prickig/streckad linje för fokusramar, det är oftast otydligare och svårare för användare att se. Gör den så tydlig som möjlig istället. Desto större färgkontrast desto bättre, de blir då väldigt tydligt för användaren vart fokuset är.

Det finns flera alternativ på hur man kan göra fokusmarkeringar, här finns det mer information: Understanding Success Criterion 2.4.13: Focus Appearance | WAI | W3C

Obs! Var dock observant att vissa saker i wcag 2.2 dokumentet kan ändras.