1.3.1 Nadpisová štruktúra stránok je neúplná a preskakuje úrovne

Porušenie sa týka celého webového sídla.

Popis problému:

Nadpisy stránok nevytvárajú súvislú hierarchiu:

• kroky podpisovania „Vyberte typ vášho občianskeho preukazu“, „Poznáte váš BOK?“, „Máte vydané certifikáty?“, „Elektronické podpisovanie nie je možné“ a „Pokyny pre fyzické podpisovanie“ nemajú žiadny nadpis úrovne 1 — hlavný nadpis kroku je vizuálne najväčší text stránky (text-4xl), v kóde je však <h3>,
• na stránke dokumentu a balíka nasleduje po <h1> „Dokument“ priamo <h4> „Zatiaľ žiadne elektronické podpisy“ a až potom <h3> „Vyberte akciu“; na stránke „Vyberte podpisovú aplikáciu“ nasleduje po <h1> nadpis <h4> „Služby tretích strán“,
• v pätičke každej stránky nasleduje po skrytom nadpise <h2> „Päta“ nadpis <h4> „Poskytovateľ služby“.

Dopad:

Používatelia čítačov obrazovky sa po stránke pohybujú podľa nadpisov (klávesa H, zoznam nadpisov) a z úrovní odvodzujú, ktoré časti sú si nadradené. Na stránkach bez <h1> nenájdu hlavný obsah kroku skratkou pre nadpis úrovne 1 a pri preskočených úrovniach sa domnievajú, že im časť obsahu chýba alebo je vnorená inak, než v skutočnosti je. Postihnutí sú nevidiaci a ťažko slabozrakí používatelia čítačov obrazovky.

Závažnosť: stredná — obsah je dostupný, orientácia v procese podpisovania je však sťažená.

Efektívne riešenie:

Pre splnenie kritéria úspešnosti je potrebné, aby každá stránka (aj každý krok načítaný do rámca Turbo) mala práve jeden <h1> s názvom kroku a aby úrovne nadpisov nasledovali bez preskočenia. Vizuálnu veľkosť je možné ponechať triedami Tailwind nezávisle od úrovne nadpisu:

<h1 class="text-4xl font-bold text-gray-900 mb-2">Vyberte typ vášho občianskeho preukazu</h1>
…
<h2 class="text-sm font-semibold text-blue-900">Zatiaľ žiadne elektronické podpisy</h2>
…
<h3 class="text-sm font-semibold uppercase">Poskytovateľ služby</h3>   <!-- pätička -->