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.
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
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. Gör markeringen Markeringen ska vara tydlig med tillräckligt hög kontrast (minst 3.0:1 (WCAG-kriteriet 1.4.11). Alla interaktiva element ska kunna få fokus. (Nivå AA)
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 |