WCAG 1.4.10 Přizpůsobení obsahu (reflow)

Kritérium úspěšnosti 1.4.10 pomáhá slabozrakým lidem, kteří si stránku hodně zvětšují. Když se obsah přeskládá do jednoho sloupce, posouvají jen jedním směrem; když ne, musí na každém řádku posouvat doleva a doprava. 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.10). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Obsah lze zobrazit bez ztráty informací nebo funkcí a bez nutnosti posouvat ve dvou směrech, a to:

• u svisle posouvaného obsahu (běžné webové stránky) při šířce odpovídající 320 CSS pixelům;
• u vodorovně posouvaného obsahu při výšce odpovídající 256 CSS pixelům.

320 CSS px je to, co zobrazí okno prohlížeče na počítači široké 1280 CSS px při zvětšení na 400 %; 256 CSS px odpovídá oknu vysokému 1024 px při 400 %.

Výjimka: části obsahu, které pro použití nebo význam vyžadují dvourozměrné rozvržení. WCAG jmenuje obrázky jako mapy a diagramy, video, hry, prezentace, datové tabulky (ne jejich jednotlivé buňky) a rozhraní, kde musí panely nástrojů při práci s obsahem zůstat na očích. Jen tyto části se smí posouvat oběma směry.

Typické chyby v e-shopu

• stránka je při 320 px širší než obrazovka kvůli banneru, iframu nebo tabulce variant produktu s pevnou šířkou;
• hlavní menu nebo filtry při velkém zvětšení zmizí a jiná cesta k nim neexistuje;
• sticky záhlaví a cookie lišta zakryjí většinu malého zobrazení;
• dlouhé názvy produktů, kódy SKU nebo URL se nezalomí a vytlačí rozvržení do strany;
• dvousloupcová pokladna, která se nevejde a vyžaduje vodorovné posouvání.

Jak to zkontrolovat

Automaticky: žádné automatické pravidlo našeho nástroje tomuto kritériu neodpovídá. Přizpůsobení obsahu závisí na rozvržení při konkrétním zvětšení a na tom, zda se něco ztratí, což pravidlo posoudit neumí. Je potřeba ruční kontrola.

Ručně: nastavte okno prohlížeče na počítači na šířku 1280 px a zvětšete na 400 %, nebo u vodorovného obsahu použijte emulaci zařízení 320 × 256 px. Projděte úvodní stránku, kategorii, produkt, košík a pokladnu. Ověřte, že nikdy nemusíte posouvat do stran, abyste přečetli text, že veškerý obsah i menu jsou stále k dispozici a že se nic nepřekrývá.

Jak to opravit

• Použijte responzivní rozvržení s pružnými šířkami (procentní šířky, max-width, minmax() v gridu) místo pevných šířek v pixelech.
• Umožněte zalamování dlouhých slov a URL (overflow-wrap: anywhere).
• Široké datové tabulky vložte do kontejneru, který se posouvá samostatně, a zbytek stránky nechte přizpůsobovat.
• Vložená videa a iframy udělejte responzivní.
• Sticky záhlaví udržujte malá, nebo je při malých šířkách přestaňte připínat.

Související kritéria

• 1.4.4 Změna velikosti textu — text při zvětšení na 200 %.
• 1.4.12 Mezery v textu — větší mezery bez ztráty obsahu.
• 1.3.4 Orientace — na výšku i na šířku.

Časté otázky

Jak otestovat přizpůsobení obsahu (reflow) podle WCAG?

Otevřete stránku v okně prohlížeče na počítači širokém 1280 CSS px a zvětšete ji na 400 %, nebo v nástrojích pro vývojáře nastavte šířku zobrazení 320 px. Projděte stránku směrem dolů a dokončete hlavní úkoly: nikdy byste neměli muset posouvat do stran, abyste přečetli text nebo se dostali k ovládacímu prvku.

Smí se datové tabulky posouvat vodorovně?

Ano. Obsah, který pro svůj význam nebo použití potřebuje dvourozměrné rozvržení — datové tabulky, mapy, diagramy, video, hry, panely nástrojů, které musí zůstat na očích — se smí posouvat ve dvou směrech. Zbytek stránky se ale musí přizpůsobit.

Stačí pro 1.4.10 responzivní šablona?

Obvykle je to dobrý začátek, přesto testujte. Prvky s pevnou šířkou, široké vložené obsahy, dlouhá slova nebo URL a sticky záhlaví často rozbijí přizpůsobení obsahu i u responzivních šablon.

Jaký je rozdíl mezi 1.4.4 a 1.4.10?

1.4.4 Změna velikosti textu požaduje, aby text fungoval při zvětšení na 200 %. 1.4.10 Přizpůsobení obsahu požaduje, aby se obsah při 400 % (šířka 320 px) vešel bez vodorovného posouvání.