WCAG 3.2.1 Při fokusu

Kritérium úspěšnosti 3.2.1 udržuje navigaci klávesnicí předvídatelnou. Lidé, kteří používají klávesnici, spínač nebo čtečku obrazovky, se stránkou pohybují tak, že přesouvají fokus z jednoho prvku na další. Pokud fokus na prvku najednou otevře novou stránku nebo přesune kurzor jinam, ztratí místo, kde byli. Jde o úroveň A a je součástí normy EN 301 549 jako článek 9.3.2.1. Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Když jakákoli komponenta uživatelského rozhraní získá fokus, nesmí vyvolat změnu kontextu. WCAG definuje změny kontextu jako zásadní změny, které mohou uživatele dezorientovat, pokud proběhnou bez jeho vědomí: změny uživatelského agenta, zobrazované oblasti, fokusu nebo obsahu, který mění význam stránky. Příkladem je otevření nového okna, přesun fokusu na jinou komponentu a přechod na novou stránku.

Změna obsahu není vždy změnou kontextu. Rozbalení menu, zobrazení nápovědy nebo zvýraznění pole při fokusu je povoleno. Jiné výjimky neexistují.

Typické chyby v e-shopu

• vyskakovací okno s newsletterem nebo nápovědou se otevře a převezme fokus, jakmile uživatel klávesnice přejde klávesou Tab do formulářového pole;
• fokus na kategorii v menu rovnou přejde na stránku kategorie;
• fokus na náhledu produktu otevře okno galerie;
• skript pole opustí (blur), jakmile získá fokus, takže do něj uživatel nemůže psát;
• přechod klávesou Tab na výběr jazyka nebo měny znovu načte stránku.

Jak to zkontrolovat

Automaticky: náš nástroj pro toto kritérium nemá pravidlo. Zda fokus spustí přechod na jinou stránku, vyskakovací okno nebo skok fokusu, závisí na skriptech a na tom, co uživatel očekává, proto je potřeba ruční kontrola.

Ručně: odložte myš a procházejte klávesou Tab celou stránku: záhlaví, menu, filtry, karty produktů, formuláře a patičku. Zpět se vracejte pomocí Shift+Tab. Na každé zastávce si všimněte, zda se kromě přesunu fokusu něco stalo: nová stránka, nové okno nebo karta, dialog nebo skok fokusu jinam. Zopakujte v pokladně a na stránkách účtu.

Jak to opravit

• Přechod na jinou stránku a dialogy spouštějte při aktivaci (kliknutí, Enter, mezerník), ne při událostech focus nebo focusin.
• Nápovědu zobrazujte jako text na stránce nebo tooltip, který nepřebírá fokus.
• U mega menu můžete podmenu otevírat při fokusu, ale na novou stránku přejděte až po aktivaci odkazu.
• Odstraňte skripty, které u prvků s fokusem volají blur().

Související kritéria

• 3.2.2 Při vstupu — stejné pravidlo pro změnu hodnoty.
• 2.4.3 Pořadí fokusu — fokus se pohybuje ve smysluplném pořadí.
• Kontrolní seznam WCAG 2.2 — všechna kritéria A a AA na jednom místě.

Časté otázky

Co je ve WCAG změna kontextu?

Zásadní změna, která může dezorientovat uživatele, který ji nečekal: otevření nového okna nebo stránky, přesun fokusu na jinou komponentu nebo změna obsahu, která změní význam stránky.

Je podle 3.2.1 povoleno zobrazit při fokusu tooltip nebo rozbalovací nabídku?

Ano, pokud jde jen o změnu obsahu. Rozbalení menu nebo zobrazení nápovědy je v pořádku; přesun fokusu jinam, nová stránka nebo nové okno ne.

Dokáže 3.2.1 zkontrolovat automatický nástroj?

Ne. Zda se něco změní, když prvek získá fokus, závisí na skriptech a musí se otestovat ručním procházením stránky klávesou Tab.