Jak přístupně strukturovat webovou stránku pomocí nadpisů – praktický návod

Strukturování webové stránky pomocí nadpisů patří k základním kamenům moderního pojetí přístupnosti. Naštěstí už je tento požadavek velmi dobře zapsán mezi tvůrci webových stránek a najít dnes webovou stránku, který není alespoň nějak strukturována pomocí nadpisů, je docela kumšt. I když výjimky se najdou.

S kolegy jsme se proto na tuto oblast zaměřili a připravili praktický návod, jak si dnes s touto z hlediska přístupnosti naprosto zásadní věcí poradit.

Aby strukturování pomocí nadpisů bylo handicapovaným uživatelům opravdu k užitku, je třeba dodržovat určitá pravidla. Tak jako v jiných oblastech přístupnosti, ani zde neexistuje jediné správné řešení, takže níže uvedené berte jako doporučení a naši best practice, která se může časem změnit - například po rozšíření landmarků z WAI-ARIA již ztratí význam pomocné skryté nadpisy nad dalšími částmi stránky.

Co je tedy třeba dodržet?

• Pro vyznačení nadpisů použijte k tomu určené značky h1 až h6. Jen tak budou moci asistivní technologie s nadpisy pracovat a zpřístupnit je uživatelům. Pokud nadpisy označíte jako nastylované divy či spany, asistivní technologie je budou považovat za prostý text a ne za nadpis a takto jej i budou svému uživateli prezentovat.
• Při vyznačování nadpisů je třeba brát v potaz jejich důležitost - čím vyšší důležitost nadpisu, tím vyšší úroveň nadpisu.
• Důležitá je i hierarchie nadpisů - specifikace HTML ani metodika WCAG 2.0 ji sice striktně nevyžadují, ale určitě je k užitku - uživatelé screenreaderů podle ní poznají, jaká je závislost mezi jednotlivými nadpisy. Pokud například vyznačíte nadpis sekce Aktuality jako h2, je vhodné nadpisy jednotlivých aktualit vyznačit jako h3, aby bylo zřejmé, že se jedná o nadpisy podřízené nadpisu Aktuality.
• Vhodně skrytými pomocnými nadpisy je užitečné vyznačit i další části stránky (menu, vyhledávání, atp.). Tento požadavek vychází z požadavků uživatelů screenreaderů na snadnou dostupnost nejen hlavního obsahu stránky, ale i jejích dalších částí, které jsou pro něj například po dočtení článku velmi důležité. Pomocné nadpisy je vhodné vyznačit takovou úrovní nadpisů, která se nevyskytuje v hlavním obsahu stránky - šikovným příkladem může být třeba Wikipedia, která pro pomocné nadpisy používá nadpisy 5. úrovně. Důvod je prostý - aby se to uživateli screenreaderu nepletlo ;-) Pokud pro pomocné nadpisy použijete jinou úroveň, uživatel bude vědět, že to je nadpis některé z dalších sekcí webu a ne odstavce v hlavním obsahu stránky.
• Mezi značky a uzavřete pouze relevantní část textu - tedy to, co je opravdu nadpisem. Nemělo by tam být nic, co nadpis není - a už vůbec ne na jeho začátku. Jestliže jsem v předchozím bodě Wikipedii pochválil, tak zde ji musím dát jako nevhodný příklad. Zakomponováním řetězce [editovat] na začátek většiny nadpisů v obsahové části stránky velmi komplikuje používání nadpisů uživatelům screenreaderů.
• Zdržuje to (nevidomý slyší slovo editovat před každým nadpisem), v tomto případě je navíc celý nadpis ve screenreaderu JAWS roztažený na 3 řádky:
  • na prvním řádku hlásí: nadpis úrovně 2 hranatá závorka
  • na druhém: nadpis úrovně 2 odkaz editovat hranatá zavřít
  • na třetím: nadpis úrovně 2 text nadpisu
• Znemožňuje používání počátečních písmen pro rychlý přesun na konkrétní nadpis.

Ujistěte se také, že obsah spadající pod nadpis obsahuje informace očekávané z nadpisu, tj. neobsahuje např. odkazy, které patří do jiné sekce stránky nebo které mají být uvozeny zcela novým nadpisem. Rovněž se přesvědčte, že obsah spadající pod daný nadpis mu nepředchází. Příkladem může být například ilustrační foto, které slouží jako odkaz na detail článku, ale v kódu je umístěno před nadpisem.

A jaké jsou vaše zkušenosti se strukturováním webové stránky nadpisy? Dodržujete výše uvedené či strukturujete webovou stránku pomocí nadpisů jinak? Podělte se o své názory v komentářích.

Související odkazy

• Chybka ve skrývání obsahu stránky a jak ji opravit