2.4.13 Fokus utseende AAA
Vissa personer använder tangentbord för att navigera på en webbplats. En markering 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. Utvecklare kan själva bestämma fokusmarkeringens utseende. 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 uppmuntras, men andra typer av markeringar är tillåtna så länge de uppfyller kraven.
Storlek
Fokusmarkeringen 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, exempelvis genom att en klickar på dem eller navigerar 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 en välja att antingen sätta fokus som en ruta som omfattar hela elementet, eller som 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 jämfört med 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 markeringen 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ärgen och fokusfärgen. 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 till stor del på webbläsarens inbyggda fokusmarkeringar. Om man däremot har ändrat på närliggande pixlar såsom bakgrundsfärg, elementets färg eller kantfärg så gäller inte undantaget utan man måste kontrollera kontrast och storlek.
Läs mer om riktlinje 2.4.13 på W3Cs webbplats.