WCAG 1.4.13 Obsah při najetí myší nebo fokusu

Kritérium úspěšnosti 1.4.13 pomáhá lidem, kteří stránku hodně zvětšují, používají lupu obrazovky, mají třes nebo ovládají web klávesnicí. Popupy, které se otevřou při najetí myší nebo fokusu, mohou zakrýt to, co právě čtou, nebo zmizet dřív, než na ně stihnou přesunout myš. Bylo přidáno ve WCAG 2.1, jde o úroveň AA a je součástí normy EN 301 549 (článek 9.1.4.13). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Pokud najetí ukazatelem nebo fokus klávesnice zobrazí a následně skryje další obsah (vlastní tooltipy, podmenu, mega menu, náhledové popupy), musí být splněny všechny tři podmínky:

• Zavřitelný: existuje způsob, jak obsah zavřít bez přesunu ukazatele nebo fokusu, obvykle klávesou Escape — pokud obsah neoznamuje chybu vstupu nebo nezakrývá či nenahrazuje jiný obsah;
• Umožňující najetí: pokud ho může vyvolat najetí myší, ukazatel se může přesunout na další obsah, aniž by zmizel;
• Trvalý: zůstává viditelný, dokud spouštěč nezmizí, uživatel ho nezavře nebo dokud jeho informace nepřestane platit.

Výjimka: obsah, jehož vizuální podobu řídí prohlížeč a autor ji nezměnil, například tooltipy z atributu title.

Nevztahuje se na modální dialogy (ty musí převzít fokus) ani na prvky, které se samy zobrazí při fokusu, například odkazy pro přeskočení obsahu.

Typické chyby v e-shopu

• mega menu, které se zavře, když myš přejíždí malou mezeru mezi položkou menu a panelem;
• menu nebo náhled mini košíku, který se otevře při najetí myší a nelze ho zavřít klávesou Escape, zatímco zakrývá stránku;
• tooltip s informací o velikosti nebo doručení, který po několika sekundách zmizí;
• zvětšení obrázku produktu při najetí myší, které zakryje podrobnosti o produktu a nelze ho zavřít;
• popup s nápovědou, který se otevře při fokusu, zakryje další formulářové pole a zavře se, až když fokus přejde dál.

Jak to zkontrolovat

Automaticky: žádné automatické pravidlo našeho nástroje tomuto kritériu neodpovídá. Test vyžaduje najíždět myší, pohybovat jí a mačkat klávesy a sledovat, co se děje. Je potřeba ruční kontrola.

Ručně: u každého prvku, který při najetí myší nebo fokusu zobrazí další obsah: (1) najeďte na něj a potom přesuňte myš na popup — musí zůstat; (2) s otevřeným popupem stiskněte Escape bez pohybu myši nebo fokusu — měl by se zavřít; (3) počkejte — nesmí zmizet po uplynutí času; (4) zopakujte s klávesnicí pomocí klávesy Tab. Udělejte to i při zvětšení na 200 %.

Jak to opravit

• Popupy zobrazené při najetí myší a fokusu zavírejte klávesou Escape.
• Spouštěč a popup nechte na sebe navazovat, nebo přidejte krátkou prodlevu před zavřením, aby se na něj ukazatel mohl přesunout.
• Odstraňte časovače, které tooltipy automaticky skrývají.
• Stejný obsah otevírejte i při fokusu klávesnice, nebo kliknutím pro uživatele dotykových zařízení.
• U velkých menu a mini košíků dejte přednost tlačítkům, která obsah otevírají kliknutím.

Související kritéria

• 1.4.10 Přizpůsobení obsahu (reflow) — obsah při velkém zvětšení.
• 1.4.11 Netextový kontrast — viditelné indikátory fokusu a ikony.
• Kontrolní seznam WCAG 2.2 — včetně 2.4.11 Fokus není zakrytý a 3.2.1 Při fokusu.

Časté otázky

Co znamená zavřitelný, umožňující najetí a trvalý?

Zavřitelný: uživatel může popup zavřít bez pohybu myši nebo fokusu, obvykle klávesou Escape. Umožňující najetí: myš se může přesunout na popup, aniž by zmizel. Trvalý: zůstane otevřený, dokud uživatel neodejde, nezavře ho nebo dokud nepřestane platit.

Vztahuje se kritérium na tooltipy z atributu title?

Ne. Obsah, jehož podobu řídí prohlížeč a autor ji nezměnil, například tooltip z HTML atributu title, je výjimkou.

Spadají mega menu pod 1.4.13?

Ano, pokud se otevírají při najetí myší nebo fokusu. Pokrývá podmenu, vlastní tooltipy a další nemodální popupy zobrazené při najetí myší nebo fokusu.

Dokáže 1.4.13 otestovat automatický nástroj?

Ne. Je potřeba najíždět myší, přesouvat fokus, mačkat Escape a sledovat výsledek, takže jde o ruční kontrolu.