This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
Jak velké musí být tlačítko na webové stránce minimálně?
Tlačítko musí mít velikost alespoň 24 krát 24 pixelů — to vyžaduje kritérium 2.5.8 „Velikost cíle (minimum)“, nově zavedené s WCAG 2.2. Menší cíle pravidelně míjejí lidé s třesoucíma se rukama nebo širokými prsty, obzvlášť na telefonu. Výjimkou jsou odkazy v běžném textu a malé cíle s dostatečným volným prostorem k sousedním cílům.
24 krát 24 pixelů: spodní hranice pro trefení
Dotyk prstem je méně přesný než kliknutí myší, a při třesu nebo omezené jemné motorice se rozptyl dál zvětšuje. Je-li cíl příliš malý, dotyk mine — v lepším případě se nic nestane, v horším se otevře sousední odkaz. Typickými problémovými místy jsou panely s hustě natěsnanými ikonami, drobné křížky pro zavření u informačních oken a pole s daty v kalendářích. 24 krát 24 pixelů je přitom spodní hranicí, ne komfortní mírou. Kritérium počítá se dvěma výjimkami: odkazy v běžném textu se mohou řídit velikostí textu a malé cíle jsou přípustné, pokud kolem zůstává dost volného prostoru, takže sousední cíl nebude nedopatřením zasažen.
Jak kontrolní služba měří velikosti cílů
Kontrolní služba změří viditelné ovládací prvky stránky — odkazy, tlačítka, pole formulářů — v jejich skutečně zobrazené velikosti, až 300 cílů na stránku. Na každý příliš malý cíl uplatní výjimky kritéria: je-li to odkaz v běžném textu, nepočítá se; zůstane-li kolem jeho středu dostatečný kruh volný od sousedních cílů, nepočítá se také. Zbude-li poté alespoň jeden cíl pod 24 krát 24 pixely, kritérium se považuje za porušené — zpráva uvádí počet, první postižený prvek a přikládá dokladový snímek obrazovky. Velikost vzorku je ve zprávě uvedena jako poznámka k měření.
Příklady
Symbol odkazy v řádku
.symbol { width: 16px; height: 16px; margin: 0; }.symbol { width: 24px; height: 24px; }
/* oder: 16 px Symbol mit 8 px Abstand zum Nachbarn */Na úrovni AA, 24 × 24 CSS pixely jsou hranice, nebo vzdálenost, která udržuje 24-pixelový kruh volný kolem cíle. Odkazy v textu jsou vyloučeny.
- Otestujte svůj web na telefonu palcem: Trefíte každou ikonu v hlavičce na první pokus?
- Zvětšete klikatelnou plochu malých ikon pomocí neviditelného vnitřního odsazení — ikona může vypadat malá, plocha musí být velká.
- Zkontrolujte křížky pro zavření informačních oken a cookie lišt — patří mezi nejčastější příliš malé cíle.
- Ponechte mezi sousedními malými cíli dostatečný volný prostor, pokud zvětšení není graficky možné.
