Hozzáférhető fókuszállapotok: Látható billentyűzetfókusz tervezése
Hogyan tervezzünk látható billentyűzetfókuszt, amely megfelel a WCAG 2.2-nek: mit igényel a 2.4.7 és 2.4.13, hogyan működik a :focus-visible, és tervezési tippek a fókuszgyűrűkhöz.
Core Takeaway
Every interactive element needs a clearly visible focus indicator for keyboard users; A WCAG 2.2 AA (2.4.7) szinten igényli. Az erős mutató érdekében törekedjen a WCAG AAA útmutatására (2.4.13): legalább egy 2 CSS pixeles körvonal területe az elem körül, 3:1 kontraszttal a fókuszált és a nem fókuszált állapotok között. A :focus-visible használatával gyűrűket jeleníthet meg a billentyűzetet használók számára anélkül, hogy minden egérkattintásnál megjelennének.
Miért számítanak a fókuszállapotok?
A billentyűzetet, eszközt vagy képernyőnagyítót használó emberek egy-egy elemet mozognak az oldalon. A fókuszjelző az egyetlen módja annak, hogy tudják, hol vannak. A böngésző körvonalának csere nélküli eltávolítása az egyik leggyakoribb akadálymentesítési hiba.
Amit a WCAG 2.2 igényel
A 2.4.7 teljesítési feltétel A látható fókusz (AA szint) megköveteli, hogy minden billentyűzettel kezelhető interfésznek legyen olyan üzemmódja, ahol a fókuszjelző látható. A WCAG 2.2 hozzáadott 2.4.13 Fókuszmegjelenés (AAA szint), ami egy erős mutatót ír le: legalább akkora, mint az alkatrész 2 CSS pixel vastagságú kerületének területe, a kontrasztarány legalább 3:1 a fókuszált és a nem fókuszált állapotok között.
:fókusz-látható
A MDN elmagyarázza, hogy a :focus-visible akkor érvényes, ha egy elem fókuszban van, és a böngésző heurisztikák segítségével úgy dönt, hogy a fókuszt meg kell jeleníteni, általában billentyűzethasználat esetén. Ez lehetővé teszi, hogy erős fókuszgyűrűket jelenítsen meg a billentyűzetet használók számára anélkül, hogy minden alkalommal megjelenne, amikor valaki rákattint egy egérgombra. Használja a körvonalak eltávolítása helyett.
A gyűrű tervezése
Gyakorlati útmutató:
- Használjon eltolású körvonalat vagy gyűrűt, hogy ne olvadjon bele az elembe.
- Ellenőrizze a kontrasztot minden háttér előtt, amelyen az elem megjelenhet; kétszínű gyűrű segít.
- Tartsa konzisztens az összetevők között, a tervezési rendszerben tokenként definiálva.
- Soha ne hagyatkozzon csak egy finom színváltozásra.
- Győződjön meg arról, hogy a fókuszált elem nincs elrejtve ragadós fejlécek mögött.
Fókusz és mozgás
A fókuszgyűrű nagyon rövid átmenettel is megjelenhet, de azonnali érzetűnek kell lennie. Kerülje az olyan animációkat, amelyek késleltetik a gyűrűt vagy mozgatják az elemet, az egyéni vászonra rajzolt összetevők esetében pedig győződjön meg arról, hogy van még valódi fókuszálható elem az oldalon, hogy a billentyűzet használói elérhessék.
Kulcs Principle, amit meg kell jegyezni
- WCAG AA (2.4.7) esetén látható fókusz szükséges
- 2.4.13 (AAA): 2 képpont kerületi terület és 3:1 kontrasztváltás
- Használja a :focus-visible funkciót a körvonalak eltávolítása helyett
- Határozza meg a fókuszgyűrűt tervezési tokenként
- A vászonképes felhasználói felületnek valódi fókuszálható elemekre van szüksége
Gyakran Ismételt Kérdések
Források
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — MDN webdokumentumok