Prístupné stavy zaostrenia: Navrhovanie viditeľného zaostrenia klávesnice
Ako navrhnúť viditeľné zaostrenie klávesnice, ktoré spĺňa WCAG 2.2: čo vyžadujú 2.4.7 a 2.4.13, ako funguje :focus-visible a tipy na navrhovanie zaostrovacích krúžkov.
Core Takeaway
Každý interaktívny prvok potrebuje pre používateľov klávesnice jasne viditeľný indikátor zaostrenia; WCAG 2.2 to vyžaduje na úrovni AA (2.4.7). Pre silný indikátor sa zamerajte na smernicu AAA WCAG (2.4.13): aspoň oblasť obrysu 2 pixelov CSS okolo prvku s kontrastom 3:1 medzi zaostrenými a nezaostrenými stavmi. Použite :focus-visible na zobrazenie krúžkov pre používateľov klávesnice bez toho, aby ste ich zobrazovali pri každom kliknutí myšou.
Prečo na stavoch zaostrenia záleží
Ľudia, ktorí používajú klávesnicu, prepínacie zariadenie alebo zväčšovač obrazovky, sa pohybujú po stránke po jednotlivých prvkoch. Indikátor zaostrenia je jediný spôsob, ako vedia, kde sa nachádzajú. Odstránenie obrysu prehliadača bez náhrady je jednou z najčastejších porúch dostupnosti.
Čo vyžaduje WCAG 2.2
Kritérium úspešnosti 2.4.7 Viditeľné zaostrenie (úroveň AA) vyžaduje, aby každé rozhranie ovládané klávesnicou malo režim, v ktorom je viditeľný indikátor zaostrenia. WCAG 2.2 pridané 2.4.13 Vzhľad zaostrenia (úroveň AAA), ktorý popisuje silný indikátor: aspoň taký veľký ako plocha obvodu komponentu s hrúbkou 2 pixelov CSS s kontrastným pomerom aspoň 3:1 medzi zaostreným a nezaostreným stavom.
:focus-viditeľný
MDN vysvetľuje, že :focus-visible sa používa, keď je prvok zameraný a prehliadač sa pomocou heuristiky rozhodne, že by sa zameranie malo zobraziť, zvyčajne pri použití klávesnice. To vám umožní zobraziť krúžky silného zaostrenia používateľom klávesnice bez toho, aby ste ich zobrazovali zakaždým, keď niekto klikne na tlačidlo myšou. Použite ho namiesto odstraňovania obrysov.
Navrhovanie prsteňa
Praktický návod:
- Použite obrys alebo krúžok s odsadením, aby nesplýval s prvkom.
- Skontrolujte kontrast na každom pozadí, na ktorom sa prvok môže objaviť; pomáha dvojfarebný krúžok.
- Udržujte ho konzistentný medzi komponentmi, definovaný ako token vo vašom dizajnovom systéme.
- Nikdy sa nespoliehajte len na jemnú zmenu farby.
- Uistite sa, že zameraný prvok nie je skrytý za lepivými hlavičkami.
Zameranie a pohyb
Krúžok zaostrenia sa môže objaviť s veľmi krátkym prechodom, ale mal by sa cítiť okamžite. Vyhnite sa animáciám, ktoré oneskorujú zvonenie alebo posúvajú prvok, a v prípade vlastných komponentov nakreslených na plátne sa uistite, že na stránke je stále skutočný zaostriteľný prvok, aby ho používatelia klávesnice mohli dosiahnuť.
Kľúč Principle na zapamätanie
- Pri WCAG AA (2.4.7) sa vyžaduje viditeľné zaostrenie
- 2.4.13 (AAA): 2px obvodová oblasť a zmena kontrastu 3:1
- Namiesto odstránenia obrysov použite :focus-visible
- Definujte zaostrovací krúžok ako dizajnový token
- Používateľské rozhranie vykreslené na plátne potrebuje skutočné zaostriteľné prvky
Často kladené otázky
Zdroje
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — Webové dokumenty MDN