Sidjämförelse

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

Komponentkällor

Komponentkällor

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 2 px avstånd (padding) till elementet med fokus.

  • I vissa fall behöver fokusmarkeringen ligga precis runt ett element med 0 px avstånd, t ex i menyalternativ. Då behöver det säkerställas att kontrasterna är tillräckliga.

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.