WCAG 1.4.12 Mezery v textu

Kritérium úspěšnosti 1.4.12 pomáhá lidem s dyslexií, slabozrakostí a jinými potížemi se čtením, kteří si text pomocí rozšíření prohlížeče nebo vlastních stylů roztahují. Větší mezery usnadňují čtení, ale jen pokud se stránka nerozbije. 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.12). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

V obsahu vytvořeném ve značkovacích jazycích, které tyto vlastnosti podporují (HTML a CSS ano), nesmí dojít ke ztrátě obsahu nebo funkcí, když uživatel nastaví všechny následující hodnoty a nezmění žádnou jinou vlastnost stylu:

• výšku řádku alespoň na 1,5násobek velikosti písma;
• mezeru za odstavci alespoň na 2násobek velikosti písma;
• mezery mezi písmeny alespoň na 0,12násobek velikosti písma;
• mezery mezi slovy alespoň na 0,16násobek velikosti písma.

Váš design tyto hodnoty používat nemusí. Požadavek je, aby je uživatel mohl přepsat, aniž by byl text oříznutý, překrytý nebo skrytý.

Výjimka: jazyky a písma, která některou z těchto vlastností nepoužívají, musí podporovat jen ty, které pro ně existují.

Typické chyby v e-shopu

• „Přidat do košíku“ a další tlačítka s pevnou výškou a overflow: hidden, takže se popisek ořízne;
• karty produktů s pevnou výškou, takže zmizí název produktu nebo cena;
• navigační záložky a štítky filtrů, jejichž text překrývá další položku;
• štítky jako „−20 %“ nebo „Novinka“ absolutně umístěné přes obrázek, takže širší text zakryje cenu;
• inline atributy style s mezerami s !important, které blokují přepsání uživatelem.

Jak to zkontrolovat

Automaticky: náš nástroj označí inline styly, které nastavují mezery mezi písmeny, slovy nebo výšku řádku s !important, což uživatelům brání je přepsat (pravidlo žádné inline mezery). Zda se text po změně ořízne, lze jen vidět, proto je potřeba i ruční kontrola.

Ručně: použijte bookmarklet pro mezery v textu nebo uživatelský styl přesně s těmito hodnotami: line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; a margin-bottom: 2em pro odstavce. Potom projděte hlavní stránky a hledejte oříznutý text, překryvy a ovládací prvky, které už nelze použít.

Jak to opravit

• Vyhněte se pevným výškám u prvků s textem; použijte místo nich min-height a vnitřní okraje (padding).
• Vyhněte se overflow: hidden u kontejnerů s textem, nebo jim dovolte růst.
• Umožněte popiskům, záložkám a štítkům zalomit se na další řádek.
• Nenastavujte mezery s !important v inline stylech.

Související kritéria

• 1.4.4 Změna velikosti textu — text při zvětšení na 200 %.
• 1.4.10 Přizpůsobení obsahu (reflow) — žádné vodorovné posouvání při 320 px.
• Bezplatná kontrola jedné stránky — najděte problémy s inline mezerami.

Časté otázky

Musí můj web používat výšku řádku 1,5?

Ne. WCAG tyto hodnoty mezer ve vašem designu nevyžaduje. Vyžaduje, aby se nic neztratilo, když uživatel vaše mezery těmito hodnotami přepíše.

Jak otestovat WCAG 1.4.12?

Použijte bookmarklet pro mezery v textu nebo uživatelský styl, který nastaví line-height 1.5, mezery za odstavci 2em, letter-spacing 0.12em a word-spacing 0.16em, a potom hledejte oříznutý, překrývající se nebo skrytý text a nefunkční ovládací prvky.

Co je nejčastější příčinou chyb?

Kontejnery s pevnou výškou nebo overflow: hidden — tlačítka, záložky, štítky a karty — které text oříznou, jakmile potřebuje víc místa.