Gör det synligt vad som är i fokus

Om riktlinjen

Innehåller lagkrav
EN 9.2.4.7
WCAG 2.4.7 (AA)

Område

En synlig fokusmarkering hjälper personer att se var på webbsidan tangentbordets fokus är placerat. Därför ska alla fokuserbara objekt ha en synlig fokusmarkering när en person tabbar dit med hjälp av tangentbordet.

Därför är det viktigt med en synlig (och tydlig) fokusmarkering

Den som navigerar med till exempel tabb-tangenten behöver veta var tangentbordets fokus är. Därför måste markeringen för tangentbordsfokus vara synlig.

Det underlättar ytterligare om fokusmarkeringen är tydlig: en tunn streckad linje kan vara svår att se, särskilt om omgivningen är spräcklig eller på annat sätt gör den streckade linjen mindre uppenbar.

Vad kräver lagen?

Det ska finnas en synlig fokusmarkering.
Fokusmarkeringen behöver inte synas förrän tangentbordet används.
När fokusmarkeringen har visats ska den förbli synlig.

Rekommendationer utöver lagkrav

Förutom lagkraven finns det rekommendationer som kan förbättra den digitala tillgängligheten:

Använd CSS för att visa vilket element som är i fokus

Oftast räcker det med en enkel css-regel för att markera vilket element som är i fokus. För att påverka utseendet på fokusmarkeringen för ett element kan man använda selektorn :focus, till exempel a:focus eller input:focus.

Ibland kan det passa bättre att använda JavaScript eller någon annan teknik för att åstadkomma en bra presentation.

Anpassa fokusmarkeringen

Tänk på att fokusmarkeringen kan behöva anpassas till omgivande formgivning: en fokusmarkering som är tydlig på en viss bakgrund kan vara otydlig på en annan.

Så testar du fokusmarkeringen

Navigera genom alla fokuserbara element på sidan med tangentbordet. Aktivera (med tangentbordet) eventuella funktioner som öppnar en meny, dialogruta eller liknande. Säkerställ att det hela tiden är synligt vilket element som har tangentbordsfokus.