Markera tydligt vilket fält eller element som är i fokus
Den som navigerar med t.ex. tab-tangenten behöver få veta var fokus ligger. Standardmarkeringen är ofta en tunn linje som är svår att se.
Gör markeringen tydlig, till exempel med en CSS-regel.
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.
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:
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):
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)
Observera att det finns utkast till ny version av WCAG, där det finns mer utförliga krav på hur fokus ska markeras.
Kommentarer till denna riktlinje
Kommentarer (2)
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?
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.
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.