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
Table of Contents |
---|
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
Info |
---|
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 endasttab-index=”0”
för att tillåta att ett element får fokus ellertab-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 | |
---|---|
Senast uppdaterad |