WCAG 2.5.8 Velikost cíle (minimum)

Kritérium úspěšnosti 2.5.8 je ve WCAG 2.2 nové. Usnadňuje trefit tlačítka a odkazy lidem s třesem nebo omezenou zručností, lidem s ukazovátkem na hlavě nebo ústní tyčinkou a každému, kdo ovládá telefon jednou rukou. Malé cíle natěsnané vedle sebe vedou ke špatným klepnutím — špatná velikost, špatná barva, „Odebrat“ místo „+1“. Jde o úroveň AA a je součástí normy EN 301 549 (článek 9.2.5.8). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Velikost cíle pro vstup ukazatelem je alespoň 24 × 24 CSS pixelů, s výjimkou případů, kdy:

• Mezery: menší cíle jsou umístěny tak, že pokud se na ohraničující rámeček každého z nich vycentruje kruh o průměru 24 CSS pixelů, kruhy neprotínají jiný cíl ani kruh jiného menšího cíle;
• Rovnocennost: funkci lze provést jiným ovládacím prvkem na stejné stránce, který kritérium splňuje;
• Vložený cíl: cíl je ve větě nebo je jeho velikost jinak omezena výškou řádku okolního textu;
• Prvek uživatelského agenta: velikost určuje prohlížeč a autor ji neupravil;
• Nezbytnost: určitá podoba cíle je pro předávanou informaci nezbytná nebo vyžadovaná zákonem.

Cíle, ve kterých se hodnota volí podle místa uvnitř (například dráha posuvníku), se počítají jako jeden cíl. Cílem je klikatelná oblast, ne jen viditelná ikona. Úroveň AAA (2.5.5) požaduje 44 × 44 CSS pixelů.

Typické chyby v e-shopu

• vzorníky barev o velikosti 16–20 px umístěné těsně vedle sebe;
• tlačítka množství „−“ a „+“ o velikosti asi 20 px vedle číselného pole;
• malé „×“ pro odebrání položky z mini košíku nebo zavření vyskakovacího okna;
• ikony sociálních sítí a platebních metod v patičce natěsnané na sebe;
• odkazy stránkování („1 2 3 …“) s malým vnitřním okrajem;
• tečky karuselu o velikosti několika pixelů bez mezer.

Jak to zkontrolovat

Automaticky: náš nástroj měří velikost a rozestupy klikatelných cílů a označí ty, které jsou menší než 24 × 24 CSS pixelů a zároveň nesplňují test mezer (pravidlo velikosti cíle). Výjimky pro rovnocenné prvky, odkazy v textu nebo nezbytnou podobu nedokáže vždy posoudit, proto označené cíle zkontrolujte ručně.

Ručně: nástroji pro vývojáře v prohlížeči změřte malé ovládací prvky — vzorníky, tlačítka množství, tlačítka zavření, ikony. Pokud je některý menší než 24 × 24, zkontrolujte mezery tak, že si na jeho střed představíte kruh 24 px. Vyzkoušejte stránku na skutečném telefonu a klepejte na malé prvky palcem.

Jak to opravit

• Tlačítkům s ikonou dejte minimální velikost: min-width: 24px; min-height: 24px (pro dotyk je lepší 44 px).
• Zvětšete vnitřní okraj místo samotné ikony — počítá se klikatelná oblast.
• Mezi sousední malé cíle, jako jsou vzorníky a odkazy stránkování, přidejte mezeru.
• Tečky karuselu zvětšete nebo je nahraďte tlačítky předchozí/další.

Související kritéria

• 2.5.2 Zrušení akce ukazatele — nechtěná klepnutí musí jít zrušit.
• 2.5.7 Přetahování — přetahování potřebuje alternativu jedním ukazatelem.
• Kontrolní seznam WCAG 2.2 — co dalšího je ve WCAG 2.2 nového.

Časté otázky

Jaká je ve WCAG 2.2 minimální velikost cíle?

Alespoň 24 × 24 CSS pixelů pro cíle vstupu ukazatelem na úrovni AA (2.5.8). Úroveň AAA (2.5.5 Velikost cíle (rozšířené)) požaduje 44 × 44 CSS pixelů.

Může být tlačítko menší než 24 px?

Ano, pokud má dostatečné mezery: kruh o průměru 24 px se středem na tlačítku nesmí protínat jiný cíl ani kruh jiného malého cíle. Další výjimky se týkají rovnocenného většího prvku na stránce, odkazů v textu, neupravených prvků prohlížeče a nezbytné nebo zákonem požadované podoby.

Musí mít textové odkazy v odstavci 24 px?

Ne. Cíle ve větě nebo cíle, jejichž velikost omezuje výška řádku okolního textu, jsou podle výjimky pro vložené cíle vyňaty.

Je cílem viditelná ikona, nebo klikatelná oblast?

Klikatelná oblast. Ikona 16 px uvnitř tlačítka 24 × 24 px s vnitřním okrajem požadavek na velikost splňuje.