Focus marker

Fokus är visuella markörer som visar vilket (oftast interaktivt) element på en sida som är fokuserat, i vårt fall genom en solid linje runt elementet. Endast ett element på en sida kan fokuseras åt gången.

Innehållsförteckning

• Innehållsförteckning

• Komponentkällor

• Tillgänglighet

• Feedback

Komponentkällor

1177

Inera

Designspecifikation

Samma typ av fokusmarkering ska användas generellt för samtliga komponenter. Fokusmarkeringar visas med:

• En 2 px solid linje

• Färg stone-base för 1177 och earth-light för Inera

• Linjen visas med 5 px avstånd (padding) till elementet med fokus

Tillgänglighet

WCAG-kriteriet 2.4.7: Synligt fokus

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. Alla interaktiva element ska kunna få fokus.  (Nivå AA)

WCAG-kriteriet 1.4.11: Tillräcklig kontrast

Standardmarkeringen är ofta en tunn linje som är svår att se. Markeringen ska vara tydlig med tillräckligt hög kontrast (minst 3.0:1).

WCAG-kriteriet 2.4.3: Fokusordning

• Om man kan navigera stegvis på en webbsida och navigeringsordningen påverkar betydelse eller användning, så ska fokuserbara komponenter få fokus i en ordning som bevarar betydelse och användning. (Nivå A) Se till att fokus/tab-ordningen är logisk.

• Tänk på att aldrig ändra tab-ordningen med tab-index utan låt fokus flöda i den ordning komponenterna ligger i designen och koden. Använd endast tab-index=”0” för att tillåta att ett element får fokus eller tab-index=”-1”för att förhindra att ett element får fokus.

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.