WCAG 2.4.11 Fokus není zakrytý (minimum)

Kritérium úspěšnosti 2.4.11 je ve WCAG 2.2 nové. Zajišťuje, že uživatelé klávesnice skutečně vidí prvek, na který přešli, a fokus nezmizí za sticky záhlavím, tlačítkem chatu nebo cookie lištou. Jde o úroveň AA a je součástí normy EN 301 549 (článek 9.2.4.11). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Když komponenta uživatelského rozhraní získá fokus klávesnice, není kvůli obsahu vytvořenému autorem zcela skrytá.

Hlavní body od W3C:

• na úrovni AA je částečné zakrytí přijatelné — prvek nesmí být skrytý zcela. Úroveň AAA (2.4.12 Fokus není zakrytý (rozšířené)) požaduje, aby nebyla skrytá žádná část;
• pokud může uživatel obsah přesouvat (například přetáhnout panel nástrojů), posuzuje se jen výchozí poloha tohoto obsahu;
• obsah otevřený uživatelem může prvek s fokusem zakrývat; pokud ho uživatel dokáže odkrýt bez přesunu fokusu klávesnice (například zavřením vyskakovacího okna klávesou Esc), nepovažuje se za skrytý.

Typické chyby v e-shopu

• sticky záhlaví nebo lišta „Přidat do košíku“, která zakrývá odkazy a tlačítka, když uživatel prochází stránku klávesou Tab;
• lišta se souhlasem s cookies připevněná ke spodní části obrazovky, která za sebou skrývá odkazy v patičce a formulářová pole;
• plovoucí tlačítko chatu nebo „Zpět nahoru“ nad poli pokladny;
• propagační lišta, která se vysune a zakryje prvek s fokusem;
• nemodální panel „Newsletter“, který zůstává otevřený, zatímco se fokus pohybuje za ním.

Jak to zkontrolovat

Automaticky: pro toto kritérium neexistuje pravidlo axe-core. Zda je fokus skrytý, závisí na pozici posunu a překrývajících se vrstvách v okamžiku fokusu, což axe netestuje, proto je potřeba ruční kontrola.

Ručně: v okně velikosti notebooku a znovu při zvětšení na 200 % projděte klávesou Tab celou stránku s otevřenou cookie lištou a potom znovu po jejím zavření. Sledujte sticky záhlaví, sticky lišty „Přidat do košíku“ a plovoucí tlačítka. Pokaždé, když fokus dopadne na prvek, musí být vidět alespoň jeho část. Věnujte pozornost formuláři pokladny a patičce.

Jak to opravit

• Rolovacímu kontejneru přidejte scroll-padding-top (a scroll-padding-bottom) ve výšce sticky lišt, aby se prvky s fokusem posunuly do volné oblasti.
• Cookie lištu udělejte modální (fokus se do ní přesune a zůstane tam, dokud uživatel nevybere) nebo ji umístěte tak, aby nezakrývala obsah.
• Na malých obrazovkách a při zvětšení zmenšete sticky prvky.
• Umožněte zavírat plovoucí widgety klávesou Esc a z klávesnice.

Související kritéria

• 2.4.7 Viditelný fokus — indikátor fokusu musí být viditelný.
• 2.4.3 Pořadí fokusu — fokus se musí pohybovat v logickém pořadí.
• Kontrolní seznam WCAG 2.2 — co dalšího je ve WCAG 2.2 nového.

Časté otázky

Porušuje sticky záhlaví WCAG 2.4.11?

Jen pokud prvek s fokusem zakryje úplně. Pokud část prvku zůstane viditelná, je 2.4.11 (AA) splněno; kritérium 2.4.12 úrovně AAA požaduje, aby nebyla skrytá žádná část. Obvykle pomůže CSS scroll-padding.

Porušuje cookie lišta 2.4.11?

Nemodální cookie lišta, která prvek získávající fokus zcela skryje, kritérium nesplňuje. W3C popisuje, jak se tomu vyhnout: udělat lištu modální, aby převzala fokus, použít scroll padding, aby prvky s fokusem zůstaly mimo ni, nebo lištu zavřít, když z ní fokus odejde.

Je 2.4.11 ve WCAG 2.2 nové?

Ano. Kritérium Fokus není zakrytý (minimum) bylo přidáno ve WCAG 2.2 na úrovni AA, spolu s kritériem Fokus není zakrytý (rozšířené) na úrovni AAA.