Förenklad beskrivning av WCAG-kriteriet 2.4.7

Markera tydligt vilket fält eller element som är i fokus

Den som navigerar med till exempel tab-tangenten behöver få veta var tangentbordets fokus ligger. Standardmarkeringen är ofta en tunn streckad linje som är svår att se, särskilt om omgivningen är spräcklig eller på annat sätt gör den streckade linjen mindre uppenbar.

En fokuserad kryssruta med webbläsarens standardmarkering av fokus (som är svår att skilja från en icke fokuserad ruta).

En fokuserad kryssruta med tydligare markerad fokus.

I bilden ovan visas hur ramar och färger kan användas för att markera vilket element som är i fokus.

Gör markeringen tydlig, till exempel med en CSS-regel.


Rekommendation för markering av fokusLänk hit

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


Använd CSS för att tydligt visa vilket element som är i fokusLänk hit

Oftast räcker det med en enkel css-regel för att markera vilket element som är i fokus. Följande regel ger till exempel en gul bakgrundsfärg och en kraftig svart ram runt länkar och inmatningsfält som är i fokus:

html-kontroller med tydlig fokusmarkering

a:focus, input:focus {border: solid black 3px; background-color:#ffff07;}

Jämför detta  med standardmarkeringen i webbläsaren (i detta fall Internet Explorer 11):

html-kontroller med svag fokusmarkering

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

Givetvis behöver den visuella presentationen även anpassas till omgivande formgivning.


Utdrag från WCAG-standardenLänk hit

Riktlinje 2.4 Navigerbart: Tillhandahåll sätt att hjälpa användarna att navigera, hitta innehåll och avgöra var de är.

2.4.7 Synligt fokus: Användargränssnitt som styrs via tangentbord har ett sätt att visa var fokus är vid tangentbordsnavigering. (Nivå AA)



Kommentarer (2)

  • Besökare skriver:

    Hej, förstår inte riktigt om vilka underordnade riktlinjer som ex. R136 är sk. ”skallkrav” (skall uppfyllas enligt WCAG 2.0) givet en viss överordnat riktlinje ex. R140?

  • Pär Lannerö skriver:

    Hej Robert, denna riktlinje (R140) hänvisar i och för sig till några andra, (bland annat R136) under rubriken ”Relaterade riktlinjer” men det innebär bara att de berör angränsande frågor eller situationer – inte att någon av dem är överordnad den andra.