Tilgjengelige fokustilstander: Utforming av synlig tastaturfokus
Hvordan designe synlig tastaturfokus som oppfyller WCAG 2.2: hva 2.4.7 og 2.4.13 krever, hvordan :focus-visible fungerer, og designtips for fokusringer.
Kjerne takeaway
Hvert interaktivt element trenger en tydelig synlig fokusindikator for tastaturbrukere; WCAG 2.2 krever det på nivå AA (2.4.7). For en sterk indikator, sikte på WCAGs AAA-veiledning (2.4.13): minst området til en 2 CSS pikselomriss rundt elementet med 3:1 kontrast mellom fokuserte og ufokuserte tilstander. Bruk :focus-visible for å vise ringer for tastaturbrukere uten å vise dem ved hvert museklikk.
Hvorfor fokustilstander betyr noe
Folk som bruker et tastatur, bytter enhet eller forstørrelsesglass, beveger seg gjennom en side ett element om gangen. Fokusindikatoren er den eneste måten de vet hvor de er. Å fjerne nettleserkonturen uten en erstatning er en av de vanligste tilgjengelighetsfeilene.
Hva WCAG 2.2 krever
Suksesskriterium 2.4.7 Fokus synlig (nivå AA) krever at ethvert tastaturbetjent grensesnitt har en modus der fokusindikatoren er synlig. WCAG 2.2 har lagt til 2.4.13 Focus Appearance (nivå AAA), som beskriver en sterk indikator: minst like stor som arealet av en 2 CSS piksel tykk omkrets av komponenten, med et kontrastforhold på minst 3:1 mellom de fokuserte og ufokuserte tilstandene.
:fokus-synlig
MDN forklarer at :focus-visible gjelder når et element har fokus og nettleseren bestemmer, ved hjelp av heuristikk, at fokus skal vises, typisk for tastaturbruk. Det lar deg vise sterke fokusringer for tastaturbrukere uten å vise dem hver gang noen klikker på en knapp med en mus. Bruk den i stedet for å fjerne konturer.
Design av ringen
Praktisk veiledning:
- Bruk en kontur eller ring med forskyvning slik at den ikke blander seg inn i elementet.
- Sjekk kontrasten mot hver bakgrunn elementet kan vises på; en tofarget ring hjelper.
- Hold det konsistent på tvers av komponentene, definert som et symbol i designsystemet ditt.
- Stol aldri på en subtil fargeendring alene.
- Pass på at det fokuserte elementet ikke er skjult bak klebrige overskrifter.
Fokus og bevegelse
En fokusring kan vises med en veldig kort overgang, men den skal føles øyeblikkelig. Unngå animasjoner som forsinker ringen eller flytter elementet, og for tilpassede lerrettegnede komponenter, sørg for at det fortsatt er et reelt fokuserbart element på siden slik at tastaturbrukere kan nå det.
Tast Principles å huske
- Synlig fokus kreves ved WCAG AA (2.4.7)
- 2.4.13 (AAA): 2px-perimeterområde og 3:1 kontrastendring
- Bruk :focus-visible i stedet for å fjerne konturer
- Definer fokusringen som et designtoken
- Canvas-gjengitt brukergrensesnitt trenger virkelige fokuserbare elementer
Ofte stilte spørsmål
Kilder
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — MDN Web Docs