Poslepu.cz na novém URL

Od ledna 2014 najdete blog na adrese poslepu.cz.

středa 13. ledna 2010

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

6 komentářů:

Marek Prokop řekl(a)...

Hezký článek, Radku. Díky. Jen prosím opravit formulaci "jak strukturovat web" na "jak strukturovat stránku". Web pomocí nadpisů opravdu strukturovat nejde, i když se o to občas někdo pod vlivem podobných terminologických zmatků pokouší.

Radek Pavlíček řekl(a)...

Díky za upozornění, Marku. Článek se samozřejmě týká webové stránky. Opravím to, ať nenapáchám víc škody než užitku.

Ivorius řekl(a)...

Ahoj Radku, děkuji za zajímavý článek a v podstatě i možnost, si o tomto tématu veřejně podiskutovat, protože nějaký čas už hledám nejlepší způsob jak s nadpisy zacházet.

Inspiroval jsem se Markem Prokopem - http://vyhledavace.info/poradna/?action=vthread&forum=2&topic=1177&page=0#2

Pokud tvým poznatkům správně rozumím, tak bych měl označovat ještě i jednotlivé bloky.

Modelová situace:
H1 - hlavní nadpis článku
podnadpisy - pro článek

H4 - hlavička (skrytý)
H5 - vyhledávání

H4 - sloupec (skrytý)
H5 - menu
ul > li
H5 - aktualiy
H6 - výpis aktualit

H4 - patička (skrytý)

Mohlo by to tak být?


A ještě by mě zajímala jedna věc, mám například e-shop - kategorii zboží. Na úvod mám v H1 název kategorie, potom nějaký lehký úvodní text a občas i podnadpis. Jak poté řešit výpis zboží v té kategorii. Dát nadpis zboží do H3? Ale co v případě že H1 nemá žádný podnadpis a rovnou vypisuje zboží (tedy po H1 ihned následují H3 - osobně to tak zatím mám, ale možná mi řekneš že to není optimální)?

Radek Pavlíček řekl(a)...

> Mohlo by to tak být?

Myslím, že ano - určitě je to jedno z akceptovatelných řešení.

Co se týká druhé otázky, lepší je (=nevidomí uživatelé jsou zvyklí) zachování hierarchie, pokud to z nějakého důvodu nelze, je samozřejmě možné použít H1 a pak H3, žádný problém to IMHO nezpůsobí.

Marián Kohn - Fidelis řekl(a)...

Dakujem Vam pan Pavlicek za hodnotny clanok. Aj ja pouyivam hierarchiu nadpisov avsak nemenim uroven nadpisov podla toho, ci su v hlavnom obsahu alebo v bocnom stlpci, ale podla prirodyenej hierarchie pri vzpnutom CSS. Myslite si, ze by som predsa mal dat nadpisom v bocnom stlpci inu uroven aj keby som tym porusil prirodzenu hierarchiu dokumentu?

Okrem toho su aj ine sposoby ako sa nevidiaci moze dostat do vyhladavacieho pola a to jednak klavesou F ci E alebo B. a tiez pouzivam preskakovacie odkazy na kazdy obsahovy celok sa da dostat tabovanim. Teda aj "klavesaci" bez screen readera sa mozu dostat hocikam v dokumente.

Uz sa neviem dockat plnej implementacie wai-aria.

Ako pomozu "roles" jňklavesakom bez screen readera? to je moja mierne off topic otazka.
Dakujem.

rionka řekl(a)...

Dobry den, velice dekuji za poucny clanek. Nikdy me napriklad nenapadlo, ze prekazkou muze byt i obrazek ci necitelny znak na zacatku kodu. Bezne standardy v podobe hackovych nadpisu a pod ne spadajicich podnadpisu obvykle dodrzuji, ale i tak je vzdycky co vylepsovat. Tvurce to nezabije a nekteremu navstevniku to muze byt k uzitku. Diky.