WCAG 1.3.1 Informace a vztahy

Kritérium úspěšnosti 1.3.1 zajišťuje, že struktura, kterou lidé vidí — nadpisy, seznamy, tabulky, popisky formulářových polí, skupiny možností — je i v kódu. Čtečky obrazovky, hlasové ovládání a režimy čtení tuto strukturu používají k předčítání stránky a pohybu po ní. Jde o úroveň A a je součástí normy EN 301 549 (článek 9.1.3.1). Na harmonizovanou normu EN 301 549 odkazuje i český zákon č. 424/2023 Sb.

Co kritérium vyžaduje

Informace, struktura a vztahy sdělované vzhledem musí být programově určitelné nebo dostupné v textu. V HTML to znamená:

• nadpisy používají h1–h6, ne jen velký tučný text;
• seznamy používají ul, ol nebo dl s položkami seznamu přímo uvnitř;
• datové tabulky používají th pro záhlaví (a u složitých tabulek scope nebo headers) a titulek, pokud má tabulka název;
• formulářová pole mají popisky propojené v kódu (label for) a související pole, například přepínače, jsou seskupena (fieldset a legend);
• informace sdělená formátováním — povinné pole označené červenou hvězdičkou, zvýrazněný aktuální krok — je dostupná i v textu nebo kódu.

Typické chyby v e-shopu

• názvy sekcí jako „Nejprodávanější“ nebo „Popis“ vypadají jako nadpisy, ale v kódu jsou to div nebo tučný p;
• tabulky velikostí a parametrů postavené z div nebo bez buněk záhlaví;
• pole v pokladně, jejichž viditelný popisek není s polem propojen v kódu;
• možnosti platby a doručení jako přepínače bez popisku skupiny;
• „povinné“ vyznačené jen červenou hvězdičkou, která není v popisku;
• role ARIA jako list nebo menu použité bez povinných podřízených rolí.

Jak to zkontrolovat

Automaticky: náš nástroj zachytí mnoho strukturálních chyb: seznamy a definiční seznamy s nesprávnými potomky, datové buňky bez záhlaví, tučné odstavce použité jako nadpisy, falešné titulky tabulek, role ARIA bez povinných rodičů nebo potomků a aria-hidden na prvku body (pravidla seznam, položka seznamu, buňka td má záhlaví, odstavec jako nadpis a související). Nevidí ale, zda něco jen vypadá jako nadpis nebo skupina, takže čistý sken není důkazem.

Ručně: použijte osnovu nadpisů (rozšíření prohlížeče nebo seznam nadpisů ve čtečce obrazovky) a porovnejte ji s tím, co vidíte. Zkontrolujte každou tabulku, formulář a seznam v kódu nebo se čtečkou obrazovky. Ujistěte se, že každý vizuální signál, například „povinné“, je i v textu.

Jak to opravit

• V šabloně a editoru používejte skutečné prvky nadpisů; dodržujte logické pořadí (jeden h1, pak sekce h2).
• Tabulky parametrů stavte pomocí table, th a caption.
• Dejte každému poli viditelný label; sady přepínačů a zaškrtávacích polí seskupte pomocí fieldset a legend.
• Uveďte „povinné“ v textu popisku nebo přidejte aria-required a hvězdičku vysvětlete.
• Dávejte přednost nativním prvkům HTML před rolemi ARIA.

Související kritéria

• 1.3.2 Smysluplné pořadí — pořadí čtení v kódu.
• 1.3.5 Určení účelu vstupu — automatické vyplňování polí s osobními údaji.
• Pravidla, která náš nástroj testuje — všechna automatická pravidla a jejich kritéria.

Časté otázky

Vyžaduje WCAG 1.3.1 správné pořadí nadpisů?

1.3.1 vyžaduje, aby text, který vypadá jako nadpis, byl jako nadpis vyznačen. Přeskočení úrovní (z h2 na h4) samo o sobě není porušením 1.3.1, ale logické pořadí výrazně usnadňuje orientaci na stránce a je dobrou praxí.

Jak otestovat WCAG 1.3.1?

Spusťte automatickou kontrolu chyb ve struktuře seznamů, tabulek a ARIA a pak porovnejte vzhled stránky s jejím kódem nebo se čtečkou obrazovky: každý nadpis, seznam, záhlaví tabulky, popisek pole a skupina mají být v kódu.

Stačí zástupný text (placeholder) jako popisek pole?

Není to spolehlivý popisek: zmizí, jakmile uživatel začne psát, a ne vždy se přečte. Použijte viditelný prvek label propojený s polem v kódu; viditelné popisky požaduje i 3.3.2 Popisky nebo instrukce.

Jsou tabulky pro rozvržení chybou?

Používat tabulky k rozvržení se nedoporučuje, ale samo o sobě to není chyba, pokud nepoužívají buňky záhlaví, titulky ani shrnutí. Datové tabulky ovšem skutečné buňky záhlaví potřebují.