Fokus utseende

Vissa personer använder tangenbord för att navigera på en webbplats. En markör visar då vilket element som är i fokus, så att användaren vet var hen befinner sig på sidan och vilka element som går att interagera med. Fokusmarkeringen kan utvecklare själva sätta ett utseende för. Denna riktlinje går igenom hur fokusmarkeringen bör se ut för att användare tydligt ska kunna se den.

En tydlig linje kring elementet som är i fokus är uppmuntras, men andra typer av markörer är tillåtna så länge de uppfyller kraven.

Storlek

Fokusmarkören måste ha en viss storlek för att uppnå riktlinjen. Storleken måste vara arean av en 2 CSS-pixlar tjock ram runt elementet. Fokusmarkeringen kan vara inne i elementet, men storlekskravet gäller fortfarande.

Exempel

Här är tre knappar. När de hamnar i fokus genom att exempelvis klicka på dem eller navigera till dem med tangentbordets tab-tangent markeras de med en 2 pixlar tjock ram. Den sista knappen visar hur fokus ser ut.

Dessa två knappar har en 1 pixel tjock prickad ram. Det gör att det blir mycket svårare att se fokusmarkeringen på knapparna.

Andra former

Elementet som är i fokus kan ha en annan form än en kvadrat eller rektangel. Då kan man välja om man sätter fokus som en ruta som omfattar hela elementet, eller en fokusmarkering som följer elementets form.

Kontrast

Man kan välja att ändra utseendet på hela elementet när det är i fokus, genom att exempelvis ändra färg på det. Kravet är då att färgen har en kontrast på minst 3:1 i skillnad från elementets färg när det inte är i fokus. Hela fokusmarkeringen behöver inte nå kravet för kontrast, så länge den del av markören som har tillräcklig kontrast följer kravet för storlek. Kravet för kontrast gäller även för fokusmarkeringens färg mot alla kringliggande färger så som bakgrundsfärg och elementets färg.

Exempel

Dessa knappar har ingen ram runt sig utan byter istället färg på hela knappen när den är i fokus. Det är stor kontrast mellan knappens ursprungliga färg och färgen när den är i fokus. Kontrasten är på 5.2:1.

Dessa knappar har liten kontrast mellan ursprungsfärg och fokusfärg. Kontrasten är på 1.2:1 och är väldigt svår att se.

Undantag

Det finns två situationer som undantas från denna riktlinje:

När utvecklare inte kan modifiera fokusmarkeringen. Vissa komponenter går inte att modifiera fokusmarkeringen på exempelvis HTML-elementet select.
När utvecklare har valt att inte modifiera fokusmarkeringen. Det är inte ett krav att skapa en unik fokusmarkering för varje element på en webbplats, utan man kan förlita sig i stor del på webbläsarens inbyggda fokusmarkörer. Om man däremot har ändrat på närliggande pixlar så som bakgrundsfärg, elementets färg eller kantfärg så är det inte undantaget utan man måste kontrollera kontrast och storlek.

Testa riktlinjen

Med tab-tangenten kan man navigera mellan alla fokuserbara element på webbplatser. Testa att navigera på webbplatsen med enbart tangentbordet och se till att fokusmarkeringen är synlig. Om det är svårt att avgöra vilket element som är i fokus behöver fokusmarkören bli tydligare. Kolla både efter hur stor markören är och även vilken färgskillnad den får.

Läs mer om riktlinje 2.4.13 på W3Cs webbplats.