Stavy zaměření přístupnosti: Návrh zaměření viditelné klávesnice

Proč na stavech soustředění záleží

Lidé, kteří používají klávesnici, přepínací zařízení nebo lupu, se po stránce pohybují po jednotlivých prvcích. Indikátor zaostření je jediný způsob, jak vědí, kde jsou. Odstranění obrysu prohlížeče bez náhrady je jednou z nejčastějších chyb přístupnosti.

Co vyžaduje WCAG 2.2

Kritérium úspěšnosti 2.4.7 Focus Visible (úroveň AA) vyžaduje, aby každé rozhraní ovládané klávesnicí mělo režim, ve kterém je viditelný indikátor zaostření. WCAG 2.2 přidáno 2.4.13 Vzhled zaostření (úroveň AAA), který popisuje silný indikátor: alespoň tak velký jako plocha obvodu součásti o tloušťce 2 pixelů CSS, s kontrastním poměrem alespoň 3:1 mezi zaostřeným a nezaostřeným stavem.

:focus-viditelný

MDN vysvětluje, že :focus-visible se použije, když má prvek fokus a prohlížeč pomocí heuristiky rozhodne, že by se fokus měl zobrazit, obvykle pro použití klávesnice. To vám umožní zobrazit silné kroužky zaměření pro uživatele klávesnice, aniž byste je ukázali pokaždé, když někdo klikne na tlačítko myší. Použijte jej místo odstranění obrysů.

Návrh prstenu

Praktický návod:

• Použijte obrys nebo prsten s odsazením, aby nesplýval s prvkem.
• Zkontrolujte kontrast proti každému pozadí, na kterém se prvek může objevit; pomáhá dvoubarevný kroužek.
• Udržujte jej konzistentní napříč komponentami, definovaný jako token ve vašem návrhovém systému.
• Nikdy se nespoléhejte pouze na jemnou změnu barvy.
• Ujistěte se, že zaměřený prvek není skrytý za lepivými záhlavími.

Zaměření a pohyb

Zaostřovací kroužek se může objevit s velmi krátkým přechodem, ale měl by se cítit okamžitě. Vyhněte se animacím, které zpožďují kroužek nebo pohyb prvku, a u vlastních komponent nakreslených na plátně se ujistěte, že na stránce je stále skutečný zaostřitelný prvek, aby se k němu uživatelé klávesnice dostali.