Velikost písma podle WCAG: co pravidla vyžadují a co ne

Lidé hledají „minimální velikost písma podle WCAG“, protože mají pocit, že nějaká existovat musí. WCAG 2.0, 2.1 ani 2.2 žádnou minimální velikost písma nestanoví. Žádné kritérium úspěšnosti neříká „běžný text musí mít nejméně 16 pixelů“. WCAG ale vyžaduje, aby si lidé mohli text zvětšit, aby to rozvržení vydrželo a aby malý text měl dostatečný kontrast. Tato stránka shrnuje čtyři kritéria, na kterých záleží, a zřetelně odděleně i doporučení, která k nim přidáváme my.

Jde o obecné informace, nikoli o právní poradenství.

Stručná odpověď

1.4.4 Změna velikosti textu: 200 % bez ztráty

Text, kromě titulků a obrázků textu, musí jít zvětšit až na 200 % bez asistivní technologie a bez ztráty obsahu nebo funkčnosti. V praxi testujte přiblížením prohlížeče (Ctrl/Cmd a +) nebo nastavením velikosti textu v prohlížeči:

• žádný text není oříznutý ani nepřekrývá jiný text;
• tlačítka, menu a formulářová pole stále fungují;
• nic důležitého nezmizí za pevnou hlavičkou.

Typické chyby: text v boxech s pevnou výškou, font-size zafixovaná jen jednotkami vw a maximum-scale=1 nebo user-scalable=no v meta značce viewport, které lidem na telefonu zabrání přiblížit stránku.

1.4.10 Přizpůsobení obsahu: 320 CSS pixelů

Obsah musí být čitelný při šířce 320 CSS pixelů — to odpovídá přiblížení okna širokého 1280 pixelů na 400 % — bez posouvání ve dvou směrech. Dlouhý text by se měl zalamovat; ke čtení řádku by nemělo být potřeba vodorovné posouvání. Výjimky existují pro obsah, který potřebuje dvourozměrné rozvržení, například mapy, datové tabulky a složité diagramy.

1.4.12 Mezery v textu

Lidé se slabým zrakem nebo dyslexií si mezery často upravují rozšířením prohlížeče nebo vlastní šablonou stylů. WCAG požaduje, aby se nic neztratilo, když nastaví:

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

Tyto hodnoty nemusíte ve svém designu používat. Design musí jen fungovat dál, když je někdo použije. Obvyklé chyby jsou pevné výšky tlačítek a karet a text oříznutý pomocí overflow: hidden.

1.4.3 a definice velkého textu

Jediné místo, kde se velikost písma objevuje v kritériu úrovně AA, je definice velkého textu, se kterou pracuje pravidlo kontrastu:

• Velký text: nejméně 18 bodů (24 CSS pixelů) v běžné tloušťce, nebo nejméně 14 bodů tučně (zhruba 18,66 CSS pixelu).
• Velký text potřebuje kontrastní poměr nejméně 3:1; veškerý ostatní text 4,5:1.
• Na úrovni AAA (1.4.6) jsou hodnoty 7:1 a 4,5:1.

Velikost tedy mění potřebný kontrast, ne to, zda je text povolený. Tenký šedý popisek ceny o velikosti 13 px je klasická chyba e-shopů: malý, světlý a s nízkým kontrastem zároveň. Dvojice barev otestujete v naší kontrole kontrastu barev.

Související kritéria

• 1.4.5 Obrázky textu (AA): místo textu vloženého do obrázku používejte skutečný text, aby šel zvětšit, přebarvit a přečíst nahlas. Bannery s textem akce v obrázku jsou častou chybou.
• 1.4.8 Vizuální prezentace (AAA): požaduje mimo jiné bloky textu ne širší než 80 znaků a text, který jde zvětšit na 200 % bez vodorovného posouvání. Je to AAA a zákony ji nevyžadují, ale jako vodítko pro dlouhé texty se hodí.
• 2.5.8 Velikost cíle (AA): netýká se textu, ale malé textové odkazy v menu často nesplní ani velikost cíle 24 × 24 pixelů.

Text zarovnaný do bloku, na střed a tučně, písma a délka řádku

Tyto otázky padají často. Většina odpovědí je v jediném kritériu úrovně AAA, 1.4.8 Vizuální prezentace. AAA nevyžadují zákony ani tvrzení o shodě na úrovni AA, proto vše, co níže pochází z 1.4.8, berte jako doporučení.

Text zarovnaný do bloku

1.4.8 požaduje, aby byl k dispozici mechanismus, díky kterému bloky textu nejsou zarovnané do bloku (k levému i pravému okraji zároveň). W3C vysvětluje proč: zarovnání do bloku nerovnoměrně roztahuje mezery mezi slovy a může vytvořit „řeky bílého místa“, které stékají stránkou. Některým lidem s kognitivním postižením to čtení ztěžuje, nebo ho dokonce znemožňuje. Na úrovni AA zarovnání do bloku chybou není. Naše doporučení: běžný text zarovnávejte vlevo (v jazycích psaných zprava doleva vpravo), zvlášť na úzkých obrazovkách, kde zarovnání do bloku vytváří největší mezery.

Délka řádku

1.4.8 také požaduje, aby šla šířka bloků textu omezit na nejvýše 80 znaků nebo glyfů (40 u čínštiny, japonštiny a korejštiny). Stejné kritérium požaduje řádkování uvnitř odstavců nejméně jeden a půl řádku, mezery mezi odstavci nejméně 1,5krát větší než řádkování, barvy popředí a pozadí volitelné uživatelem a text, který jde zvětšit na 200 % bez vodorovného posouvání v okně na celou obrazovku. Mechanismus může poskytovat prohlížeč; stránka nemusí stavět vlastní ovládací prvky.

Text na střed

Text zarovnaný na střed nezmiňuje žádné kritérium WCAG. Naše doporučení: krátké nadpisy a tlačítka klidně vycentrujte, ale odstavce, seznamy a popisky formulářů nechte zarovnané vlevo. Dlouhý text na střed má zubatý levý okraj, takže čtenář musí začátek každého řádku hledat, což je těžší při přiblížení na 200 % a pro lidi s dyslexií.

Tučný text

Tučné písmo se ve WCAG objevuje na dvou místech:

• Velký text: 14 bodů tučně (zhruba 18,66 CSS pixelu) se už počítá jako velký text a na úrovni AA potřebuje jen kontrast 3:1 místo 4,5:1 (1.4.3).
• Význam: pokud tučné písmo nebo jiný styl textu nese význam — „pole označená tučně jsou povinná“, tučné slovo označující varování —, musí být tento význam dostupný i v kódu nebo v textu. W3C uvádí použití změn v prezentaci textu k předání informace bez odpovídajícího kódu nebo textu jako selhání F2 kritéria 1.3.1 Informace a vztahy. Pro zdůraznění používejte <strong> nebo <em> a slovo „povinné“ napište.

WCAG neomezuje, kolik tučného písma použijete. Dlouhé pasáže tučně se hůř přehlížejí; vyhraďte ho pro zdůraznění.

„Normální“ velikost textu

WCAG „normální text“ nedefinuje. Definuje velký text a vše menší je to, čemu checkery říkají normální text: cokoli pod 18 bodů (24 CSS pixelů) v běžné tloušťce nebo pod 14 bodů tučně. Normální text potřebuje na úrovni AA kontrastní poměr nejméně 4,5:1, velký text 3:1. Minimální velikost pro normální text stále neexistuje; viz tabulku nahoře.

Písma a kontrola písma

WCAG nejmenuje ani nezakazuje žádné písmo a nestanoví žádný požadavek na rodinu písma. Důležité je, aby vaše písmo fungovalo s kritérii výše: jde přiblížit na 200 %, funguje dál při zvětšených mezerách (1.4.12) a má při své tloušťce dostatečný kontrast — tenká písma mohou působit světleji, než odpovídá jejich barvě, na což W3C upozorňuje v Understanding 1.4.3. Naše doporučení: zvolte rodinu písma se zřetelně odlišnými znaky (I, l a 1; O a 0), běžnou tloušťkou, která není vlasově tenká, a plnou podporou jazyků vašeho webu.

„WCAG font checker“ nemůže písmo schválit, protože žádný seznam povolených písem neexistuje. Automatická kontrola umí — a náš WCAG checker to dělá — otestovat kontrast každého textu podle pravidla velkého textu a označit viewport, který blokuje přiblížení. Délku řádku, zarovnání do bloku a chování textu při 200 % musí posoudit člověk.

Doporučení, ne požadavky

Následující hodnoty jsou naše doporučení pro čitelné weby e-shopů a služeb. Nejsou to požadavky WCAG a stránka kvůli jiným hodnotám kritéria WCAG neporušuje.

• Běžný text kolem 16 px. To je výchozí velikost textu běžných prohlížečů. Výrazně menší běžný text přidává práci přiblížení na 200 %.
• Používejte relativní jednotky (rem, em) pro velikost písma a výšku řádku, aby se respektovala velikost textu, kterou si lidé nastaví v prohlížeči.
• Výška řádku 1,4–1,6 u běžného textu a délka řádku zhruba 50–80 znaků.
• Vyhněte se pevným výškám u prvků s textem; nechte je růst.
• Neblokujte přiblížení v meta značce viewport.
• Drobné písmo s rozmyslem. Právní poznámky, ceny za měrnou jednotku a nápovědy u formulářů čtou všichni, proto jim dejte stejný kontrast jako běžnému textu.

Jak zkontrolovat velikost písma a problémy s přiblížením

1. Automatická kontrola. Náš bezplatný WCAG checker najde nízký kontrast, včetně pravidla velkého textu, a viewport, který blokuje přiblížení. Neposoudí, zda přiblížené rozvržení stále funguje.
2. Přiblížení na 200 %. Použijte přiblížení prohlížeče a projděte úvodní stránku, produkt, košík a pokladnu.
3. Úzké okno nebo přiblížení na 400 %. Ověřte, že se text zalamuje a nic nevyžaduje vodorovné posouvání.
4. Mezery v textu. Použijte hodnoty z 1.4.12 pomocí bookmarkletu nebo nástroje pro mezery v textu v našem rozšíření prohlížeče a hledejte oříznutý text.

Celý postup najdete v článku jak testovat WCAG. Naše kontroly jsou automatizovanou kontrolou, nikoli úplným auditem, a nejde o právní poradenství.

Časté otázky

Jaká je minimální velikost písma podle WCAG?

Žádná. Žádné kritérium úspěšnosti WCAG 2.0, 2.1 ani 2.2 minimální velikost písma nestanoví. WCAG místo toho požaduje, aby text šel zvětšit na 200 % (1.4.4), přeskládal se na úzké obrazovce (1.4.10), vydržel větší mezery (1.4.12) a měl dostatečný kontrast (1.4.3).

Jaká velikost písma se podle WCAG počítá jako velký text?

Nejméně 18 bodů, tedy 24 CSS pixelů, v běžné tloušťce, nebo nejméně 14 bodů tučně, zhruba 18,66 CSS pixelu. Velký text potřebuje na úrovni AA kontrastní poměr 3:1 místo 4,5:1.

Vyžaduje WCAG 16 px?

Ne. 16 pixelů je výchozí velikost textu v běžných prohlížečích a rozumné doporučení pro běžný text, ale WCAG ji nevyžaduje. Text o velikosti 16 px, který nejde zvětšit, neprojde; menší text, který se dobře zvětšuje, projít může.

Jaké přiblížení WCAG vyžaduje?

Text musí jít zvětšit až na 200 % bez ztráty obsahu nebo funkčnosti (1.4.4). Obsah se také musí přeskládat při šířce 320 CSS pixelů, což odpovídá přiblížení na 400 % v okně širokém 1280 pixelů, bez posouvání ve dvou směrech (1.4.10).

Mám pro velikost písma použít px, em, nebo rem?

WCAG jednotky nepředepisuje. Relativní jednotky jako rem a em usnadňují respektovat velikost textu, kterou si lidé nastaví v prohlížeči, proto je doporučujeme, ale px samo o sobě chybou není.

Povoluje WCAG text zarovnaný do bloku?

Na úrovni AA ano. Jen kritérium AAA 1.4.8 Vizuální prezentace požaduje, aby byl k dispozici mechanismus, díky kterému bloky textu nejsou zarovnané do bloku, protože nerovnoměrné mezery mezi slovy vytvářejí „řeky“ bílého místa. AAA je doporučení, ne zákonný požadavek.

Zdroje

• W3C, WCAG 2.2 (1.4.3, 1.4.4, 1.4.10, 1.4.12 a definice velkého textu): https://www.w3.org/TR/WCAG22/
• W3C, Understanding 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• W3C, Understanding 1.4.10 Reflow: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html
• W3C, Understanding 1.4.8 Visual Presentation: https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html
• W3C, Understanding 1.3.1 Info and Relationships: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html
• W3C, Understanding 1.4.3 Contrast (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html