WCAG 1.4.4 Změna velikosti textu

Kritérium úspěšnosti 1.4.4 umožňuje slabozrakým lidem zvětšit text bez speciálního softwaru a web přitom dál používat. Mnoho starších návštěvníků prostě stiskne Ctrl a + nebo text roztáhne prsty na telefonu. Jde o úroveň AA a je součástí normy EN 301 549 (článek 9.1.4.4). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Text lze zvětšit bez asistivních technologií až na 200 procent bez ztráty obsahu nebo funkčnosti.

• Počítá se jakýkoli mechanismus změny velikosti textu, který prohlížeč podporuje, včetně přiblížení celé stránky; vlastní tlačítka „A+“ nepotřebujete.
• Při 200 % musí veškerý text zůstat viditelný a čitelný a všechny funkce musí dál fungovat: žádný oříznutý nebo překrývající se text, žádná tlačítka vytlačená mimo obrazovku nebo za jiné prvky.

Výjimky: titulky a obrázky textu (u obrázků textu viz 1.4.5).

Typické chyby v e-shopu

• meta tag viewport obsahuje user-scalable=no nebo maximum-scale=1, takže přiblížení prsty na telefonech nefunguje;
• text v tlačítkách, štítcích nebo záložkách je oříznutý, protože jejich kontejnery mají pevnou výšku nebo šířku;
• lepicí záhlaví a cookie lišta při 200 % narostou natolik, že zakryjí většinu obrazovky;
• rozbalovací menu nebo minikošík se při větších velikostech stanou nedostupnými;
• velikosti písma jen v jednotkách viewportu (vw), takže text se s přiblížením nezvětšuje.

Jak to zkontrolovat

Automaticky: náš nástroj označí meta tag viewport, který přiblížení vypíná nebo ho omezuje pod 2× (pravidlo meta viewport). Zda se při 200 % ztrácí obsah, závisí na rozvržení a vyžaduje ruční kontrolu.

Ručně: v okně stolního prohlížeče širokém asi 1280 px přibližte na 200 % a projděte hlavní úkony: vyhledávání, otevření produktu, výběr variant, přidání do košíku, pokladnu. Hledejte oříznutý text, překryvy a cokoli, na co se nedostanete. Na telefonu ověřte, že funguje přiblížení prsty. Přiblížení jen textu (ve Firefoxu „Měnit velikost pouze textu“) je přísnější doplňkový test.

Jak to opravit

• Z meta tagu viewport odstraňte user-scalable=no a maximum-scale.
• Pro velikosti písma používejte relativní jednotky (rem, em) a vyhněte se pevným výškám u prvků, které obsahují text.
• Nechte tlačítka, popisky a štítky zalomit na dva řádky místo ořezávání.
• Při velkém přiblížení udržujte lepicí záhlaví malé, nebo ho na nízkých obrazovkách nedělejte lepicí.

Související kritéria

• 1.4.10 Přizpůsobení obsahu (reflow) — žádné vodorovné posouvání při přiblížení na 400 %.
• 1.4.12 Mezery v textu — větší řádkování a mezery mezi písmeny bez ztráty obsahu.
• 1.4.5 Obrázky textu — text v obrázcích se špatně zvětšuje.

Časté otázky

Stačí ke splnění 1.4.4 zoom prohlížeče?

Ano, přiblížení stránky v prohlížeči je uznávaný způsob změny velikosti textu. Stránka musí zůstat použitelná při 200 %: žádný oříznutý text, překrývající se prvky ani skrytá tlačítka.

Stanovuje WCAG minimální velikost písma?

Ne. WCAG 2.2 nemá minimální velikost písma. 1.4.4 požaduje, aby text šel zvětšit na 200 %, a 1.4.3 stanovuje kontrast textu, bez ohledu na jeho velikost.

Je user-scalable=no chybou?

Meta tag viewport, který přiblížení vypíná nebo omezuje (user-scalable=no nebo nízká hodnota maximum-scale), brání uživatelům mobilů zvětšit text a hlásí se jako porušení tohoto kritéria.

Jak otestovat WCAG 1.4.4?

Nastavte okno prohlížeče na šířku 1280 px, přibližte na 200 % a projděte klíčové stránky a úkony. Vše musí zůstat čitelné a funkční.