WCAG 1.3.2 Smysluplné pořadí

Kritérium úspěšnosti 1.3.2 zajišťuje, že když čtečka obrazovky čte stránku shora dolů nebo když se stránka zobrazí bez stylů, obsah stále přichází v pořadí, které dává smysl. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.1.3.2). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Pokud pořadí, ve kterém je obsah prezentován, ovlivňuje jeho význam, musí být správné pořadí čtení programově určitelné — v praxi musí tento význam dávat pořadí prvků v HTML (pořadí v DOM).

Dvě věci stojí za to vědět:

• kritérium platí jen tam, kde na pořadí záleží. Navigace, hlavní obsah a postranní panel mohou být v libovolném pořadí; obsah uvnitř článku, formuláře nebo bloku s cenou musí zůstat ve správném pořadí;
• stačí alespoň jedno smysluplné pořadí. Nemusí být jediné možné.

Typické chyby v e-shopu

• CSS order, flex-direction: row-reverse nebo umístění v gridu zobrazí cenu vizuálně před názvem produktu, ale kód se čte jinak;
• blok „původně / nyní“, kde kód čte novou cenu jako „původně“;
• průvodce velikostmi nebo srovnání rozvržené do sloupců pomocí mezer nebo div, které se po řádcích čte jako nesmysl;
• tabulka pro rozvržení, která nedává smysl, když se její buňky čtou jedna po druhé;
• cookie lišta nebo vyskakovací okno vložené na konec kódu, ale zobrazené nahoře, takže jejich kontext se přečte až nakonec.

Jak to zkontrolovat

Automaticky: k tomuto kritériu se v našem nástroji neváže žádné automatické pravidlo. Nástroj vidí pořadí v DOM, ale ne to, zda se mění význam. Je potřeba ruční kontrola.

Ručně: vypněte CSS (například rozšířením prohlížeče nebo v režimu čtení) a přečtěte stránku shora dolů: dává každý blok stále smysl? Nebo si ji poslechněte čtečkou obrazovky v režimu čtení. Zvláštní pozornost věnujte cenám, detailům produktu, formulářům a vícesloupcovým rozvržením.

Jak to opravit

• Pište HTML v pořadí, ve kterém má být čteno, a CSS používejte jen pro rozvržení, ne ke změně významu.
• U obsahu, jehož pořadí je důležité, se vyhněte přeskupování pomocí CSS; pokud na mobilu potřebujete jiné pořadí, změňte kód.
• Pro tabulková data používejte skutečné tabulky, ne mezery nebo polohované bloky.
• Dialogy a lišty vkládejte do DOM tam, kam logicky patří, a u modálních dialogů na ně přesuňte fokus.

Související kritéria

• 1.3.1 Informace a vztahy — struktura vyznačená v kódu.
• 1.3.3 Smyslové charakteristiky — instrukce, které spoléhají na polohu.
• Kontrolní seznam WCAG 2.2 — včetně 2.4.3 Pořadí fokusu.

Časté otázky

Musí pořadí v kódu odpovídat vizuálnímu pořadí?

Jen tam, kde pořadí ovlivňuje význam. Nezávislé bloky, jako je navigace a hlavní obsah, mohou být v libovolném pořadí; kroky receptu, cena a její popisek nebo název produktu a jeho detaily musí zůstat v pořadí, které dává smysl.

Je přeskupení pomocí CSS flex nebo grid chybou?

Ne automaticky. Chybou se stává, když přeskupené vizuální pořadí nese význam, který pořadí v kódu nemá, například když si „původní cena“ a „nová cena“ vymění místa.

Je 1.3.2 totéž co pořadí fokusu?

Ne. 1.3.2 se týká pořadí čtení obsahu. Pořadí, ve kterém se pohybuje fokus klávesnice, řeší 2.4.3 Pořadí fokusu, i když obojí se obvykle opravuje stejně.