Gör det synligt vad som är i fokus

Om riktlinjen

  • EN 9.2.4.7
  • WCAG 2.4.7 (AA)

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

Utöver det lagen kräver finns ett antal tips och rekommendationer för hur du kan arbeta med fokusmarkering för att förbättra digital tillgänglighet:

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.

Utdrag ur WCAG

WCAG 2.4.7 (AA) Synligt fokus

Användargränssnitt som styrs via tangentbord har ett sätt att visa var fokus är vid tangentbordsnavigering.

Därför länkar vi till WCAG på svenska och engelska

Hjälpte denna information dig?

Ditt svar hjälper oss att förbättra sidan

Senast uppdaterad: