Statele de focalizare accesibile: proiectarea focalizării vizibile de la tastatură
Cum să proiectați focalizarea vizibilă a tastaturii care îndeplinește WCAG 2.2: ce necesită 2.4.7 și 2.4.13, cum funcționează :focus-visible și sfaturi de proiectare pentru inelele de focalizare.
Core Takeaway
Fiecare element interactiv are nevoie de un indicator de focalizare clar vizibil pentru utilizatorii de tastatură; WCAG 2.2 îl necesită la nivelul AA (2.4.7). Pentru un indicator puternic, urmăriți ghidul AAA al lui WCAG (2.4.13): cel puțin zona unui contur de 2 pixeli CSS în jurul elementului cu contrast 3:1 între stările focalizate și nefocalizate. Utilizați :focus-visible pentru a afișa inelele pentru utilizatorii de tastatură fără a le afișa la fiecare clic de mouse.
De ce contează stările de focalizare
Persoanele care folosesc o tastatură, un dispozitiv de comutare sau o lupă de ecran se deplasează printr-o pagină câte un element. Indicatorul de focalizare este singurul mod în care ei știu unde se află. Eliminarea conturului browserului fără o înlocuire este una dintre cele mai frecvente erori de accesibilitate.
Ce necesită WCAG 2.2
Criteriul de succes 2.4.7 Focus Visible (nivel AA) necesită ca orice interfață operabilă cu tastatură să aibă un mod în care indicatorul de focalizare este vizibil. WCAG 2.2 a adăugat 2.4.13 Focus Appearance (nivel AAA), care descrie un indicator puternic: cel puțin la fel de mare ca suprafața unui perimetru gros de 2 pixeli CSS al componentei, cu un raport de contrast de cel puțin 3:1 între stările focalizate și nefocalizate.
:focus-vizibil
MDN explică că :focus-visible se aplică atunci când un element are focalizare și browser-ul decide, folosind euristica, că focusul ar trebui afișat, de obicei pentru utilizarea tastaturii. Acest lucru vă permite să afișați inele de focalizare puternice pentru utilizatorii de tastatură fără a le afișa de fiecare dată când cineva face clic pe un buton cu mouse-ul. Folosiți-l în loc să eliminați contururile.
Proiectarea inelului
Îndrumări practice:
- Utilizați un contur sau un inel cu un decalaj, astfel încât să nu se amestece în element.
- Verificați contrastul pe fiecare fundal pe care poate apărea elementul; un inel în două culori ajută.
- Păstrați-l consecvent între componente, definit ca un simbol în sistemul dvs. de proiectare.
- Nu vă bazați niciodată doar pe o schimbare subtilă de culoare.
- Asigurați-vă că elementul focalizat nu este ascuns în spatele anteturilor lipicioase.
Focalizare și mișcare
Un inel de focalizare poate apărea cu o tranziție foarte scurtă, dar ar trebui să pară instantaneu. Evitați animațiile care întârzie inelul sau mută elementul, iar pentru componentele personalizate desenate pe pânză, asigurați-vă că există încă un element real focalabil în pagină, astfel încât utilizatorii de tastatură să poată ajunge la el.
Cheie Principles de reținut
- Focalizarea vizibilă este necesară la WCAG AA (2.4.7)
- 2.4.13 (AAA): zonă de perimetru de 2 px și modificare a contrastului 3:1
- Utilizați :focus-visible în loc să eliminați contururile
- Definiți inelul de focalizare ca simbol de design
- Interfața de utilizare redată pe pânză are nevoie de elemente reale focalizabile
Întrebări frecvente
Surse
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — MDN Web Docs