WCAG 2.4.7 Viditelný fokus

Kritérium úspěšnosti 2.4.7 zajišťuje, že uživatelé klávesnice vidí, kde se na stránce nacházejí. Bez viditelného indikátoru fokusu je mačkání klávesy Tab jako pohyb myší s neviditelným kurzorem: vidící uživatelé klávesnice — lidé s motorickým postižením, mnoho slabozrakých lidí, zkušení uživatelé — nepoznají, který odkaz nebo tlačítko zareaguje. Jde o úroveň AA a je součástí normy EN 301 549 (článek 9.2.4.7). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Každé uživatelské rozhraní ovladatelné klávesnicí má režim provozu, ve kterém je indikátor fokusu klávesnice viditelný.

V praxi: kdykoli prvek získá fokus z klávesnice, je vidět indikátor — výchozí obrys prohlížeče nebo vlastní styl. Zdokumentované chyby:

• styly, které indikátor fokusu odstraní nebo skryjí (outline: none, outline: 0 nebo okraj, který ho zakryje), bez viditelné náhrady;
• skripty, které prvku fokus odeberou, jakmile ho získá.

WCAG 2.2 navíc přidalo na úrovni AAA kritérium 2.4.13 Vzhled fokusu s pravidly pro velikost a kontrast indikátoru; na úrovni AA se vyžaduje jen viditelnost.

Typické chyby v e-shopu

• reset stylů v šabloně s *:focus { outline: none; }, aby se po kliknutí myší skryl „ošklivý“ rámeček;
• tlačítka a vzorníky barev s vlastním stylem, který při fokusu jen velmi nepatrně změní barvu;
• rámeček fokusu ve stejné barvě jako pozadí značky, takže na barevných bannerech zmizí;
• vlastní zaškrtávací políčka a přepínače, kde je skutečný input skrytý a jeho fokus se na vizuální náhradě neukazuje;
• karty produktů, kde fokus přejde na neviditelný překryvný odkaz.

Jak to zkontrolovat

Automaticky: pro toto kritérium neexistuje pravidlo axe-core. Zda je fokus viditelný, závisí na tom, co se na obrazovce změní, když prvek získá fokus, a to axe neporovnává, proto je potřeba ruční kontrola.

Ručně: projděte klávesou Tab celou stránku včetně záhlaví, mega menu, filtrů, možností produktu, vysouvacího košíku, formulářů a patičky. Na každé zastávce byste měli jasně vidět, který prvek má fokus. Kontrolujte na světlém i tmavém pozadí a ve vyskakovacích oknech. Pokud indikátor zmizí, prohledejte CSS kvůli outline: none nebo pravidlům :focus.

Jak to opravit

• Nikdy neodstraňujte obrys bez náhrady. Použijte :focus-visible, abyste uživatelům klávesnice ukázali výrazný rámeček a kliknutí myší zůstala čistá.
• Spolehlivý styl: :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }, nebo dvoubarevný rámeček, který funguje na jakémkoli pozadí.
• Fokus ukazujte na viditelné části vlastních ovládacích prvků (například na stylovaném vzorníku, ne na skrytém inputu).
• Usilujte o kontrast 3:1 vůči sousedním barvám, aby byl rámeček dobře vidět.

Související kritéria

• 2.4.11 Fokus není zakrytý (minimum) — prvek s fokusem nesmí být skrytý za jiným obsahem.
• 1.4.11 Netextový kontrast — vizuální části ovládacích prvků potřebují kontrast 3:1.
• 2.4.3 Pořadí fokusu — fokus se musí pohybovat v logickém pořadí.

Časté otázky

Je outline: none porušením WCAG?

Kritérium 2.4.7 nesplňuje, když odstraní indikátor fokusu a nic jiného neukazuje, kde fokus je. Odstranit výchozí obrys je v pořádku, pokud ho nahradíte jasně viditelným vlastním stylem.

Jaký je rozdíl mezi 2.4.7 Viditelný fokus a 2.4.13 Vzhled fokusu?

2.4.7 (úroveň AA) požaduje jen to, aby byl indikátor fokusu viditelný. 2.4.13 Vzhled fokusu (úroveň AAA, nové ve WCAG 2.2) stanoví minimální velikost indikátoru a změnu kontrastu 3:1.

Potřebuje indikátor fokusu minimální kontrast?

Podle samotného 2.4.7 ne. Rámeček fokusu je ale vizuální součástí ovládacího prvku, takže je relevantní 1.4.11 Netextový kontrast (3:1), a indikátor, který v praxi nikdo nevidí, fokus viditelným nedělá.