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.

 

1177

 

Inera

 

Innehållsförteckning


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 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


I slutet av året kommer WCAG 2.2 som innehåller en uppsättning nya krav, bland annat WCAG-kriterie 2.4.11 som handlar om fokusmarkering. Kravet är preliminärt och kan komma att ändras. Sidan uppdateras med ny info när den är fastställd.

 

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.

Publicerad

Jan 18, 2020

Senast uppdaterad

Jun 13, 2023