Správné používání nadpisů a oblastí, jejich dopad na přístupnost a doporučení WCAG

Cílem webové přístupnosti obecně je zprostředkovat uživatelům s postižením nebo jiným znevýhodněním co možná nejpodobnější vjem z používání stránky, jakému se těší uživatelé bez znevýhodnění. Vidící uživatelé vnímají strukturu a vztahy prvků na webové stránce na základě rozlišování rozličných vizuálních vodítek jako jsou různá ohraničení, podbarvení, prostor mezi prvky, jiná velikost, font či barva textu atd. Zrakově postižení uživatelé, ale i někteří jinak znevýhodnění, však musejí spoléhat na to, co jim o webové stránce poví jejich asistivní technologie, například odečítač obrazovky, což přímo závisí na správném používání jazyka HTML, JavaScriptu, specifikace ARIA a dalších technologií autorem stránky.

V tomto článku se zaměříme na to, proč, kdy a jak používat elementy a atributy jazyka HTML a ARIA konkrétně pro vyznačení nadpisů a oblastí (též známé jako landmarky) tak, abychom co možná nejlépe jako kodéři kompenzovali handicap znevýhodněným uživatelům.

Proč a jak používat nadpisy?

Elementy nadpisů <h1> až <h6>, stejně jako jiné elementy a atributy jazyka HTML, by měly být používány na základě své sémantiky, tedy významu, nikoliv vzhledu, kterého se dosahuje správně pomocí stylů CSS. Mezi časté chyby patří právě používání elementů <h1> až <h6> pro docílení určitého odlišného vzhledu nějakého nápisu, například v adrese bydliště vyznačení ulice větším písmem pomocí elementu <h4>.

Používání nadpisových elementů dle jejich sémantiky je důležité proto, aby na základě nich mohla být vytvořena korektní nadpisová osnova podobně, jako když ve Wordu stylujete nadpisy pro možnost vygenerování obsahu dokumentu. Správně používané nadpisové elementy pak přináší uživatelům následující benefity:

Při lineárním procházení stránky odečítačem odshora dolů, tedy podobně jako vidící čte knihu, je uživateli odečítače oznamováno, kdykoliv se přesune kurzorem odečítače na nějaký nadpis a je mu ohlášena současně i jeho úroveň.
Desktopové i mobilní odečítače obrazovky disponují funkcí skákání po nadpisech nehledě na jejich úroveň, popřípadě při dostupnosti hardwarové klávesnice je možné skákat také jen po nadpisech konkrétní úrovně. Uživatel tak může např. stránku rychle projet přeskakováním jen po nadpisech <h2>, čímž může rychle získat hrubou představu o obsahu stránky.
Specifické a často využívané je přeskočení na nadpis <h1>, který by se měl na stránce vyskytovat pouze jednou a to na začátku jejího hlavního obsahu, přičemž by text tohoto nadpisu měl stručně vystihovat zaměření prohlížené stránky.

Z uvedeného vyplývá, že vhodně zvolenými, správně umístěnými a dobře pojmenovanými nadpisy můžeme orientaci a procházení stránky uživatelům asistivních technologií značně zjednodušit. Proto někteří autoři stránek umísťují nadpisy nejenom do hlavní obsahové části stránky pro strukturování textu podobně jako ve wordovém dokumentu, ale také pro uvození některých významných sekcí stránky, jako například hlavní či vedlejší navigace nebo různých postranních panelů. Takové použití nadpisů prosazuje i technika H69 doporučená konsorciem W3C. Přítomnost takových pomocných nadpisů může být případně před vidícími uživateli za použití správné CSS techniky vizuálně skryta, aby nadpis sloužil jen uživatelům odečítačů a vizuálně nerušil.

Korektní používání a struktura nadpisů <h1> až <h6> je navíc klíčovým faktorem pro zlepšení SEO, tedy pro správnou interpretaci webového obsahu roboty a pro vyšší pozici stránky ve výsledcích vyhledávání.

Proč a jak používat oblasti?

Oblasti (landmarky) vznikly právě proto, aby zjednodušily orientaci a navigaci uživatelů asistivních technologií na webové stránce, čili stejný problém, který jsme uvedli, že se před příchodem oblastí snažily řešit nadpisy. Myšlenka oblastí je následující:

V HTML kódu, čili programově, sémanticky vymezit obecně na webu často se vyskytující standardní sekce stránky, jako je hlavička, navigace, hlavní obsah, patička atd. Případně tyto sekce opatřit také pojmenováním za použití atributů aria-label či aria-labelledby, což je doporučeno zejména v případě oblasti typu navigace určené elementem <nav> nebo atributem role=“navigation“, jestliže je těchto navigačních oblastí na stránce více.
Umožnit, aby uživateli bylo oznámeno odečítačem, když vstupuje a opouští určitou oblast.
Umožnit navigaci po oblastech, podobně jako po nadpisech, a to buďto skákáním na následující nebo předchozí oblast, anebo vypsáním stromového seznamu oblastí, který lze procházet a na vybranou oblast skočit, případně zde oblasti rozbalovat a sbalovat dle toho, jak jsou do sebe zanořeny v HTML kódu.

Důležitou funkci má obzvlášť oblast typu hlavní obsah definovaná elementem <main> nebo atributem role=“main", která umožňuje zejména následující:

Určit hlavní obsah pro různé režimy čteček, které převádějí stránku do podoby oproštěné od opakujícího se nebo jinak nedůležitého obsahu pro soustředěné čtení.
Odečítač obrazovky JAWS disponuje přímo klávesovou zkratkou pro přeskočení na takto vyznačenou hlavní oblast webové stránky.

Doporučená struktura oblastí

Při zavádění oblastí do webové stránky doporučujeme držet se při zemi a s jejich využíváním to příliš nepřehánět. Standardní a dostačující struktura vypadá většinou následovně:

Hlavička stránky, čili oblast od samotného začátku stránky až po prvek těsně před jejím hlavním obsahem, by měla být vyznačena elementem <header role=“banner“>.
Hlavní obsah, tedy oblast začínající těsně za hlavičkou až těsně před patičkou, by měl být značen pomocí <main role=“main“>.
Patička, čili oblast těsně za hlavním obsahem až do konce stránky, by měla být značena pomocí <footer role=“contentinfo“>.
Hlavní navigace stránky by měla být značena pomocí <nav role=“navigation“>. Pokud je navigačních oblastí více, tak by každá z nich měla být pojmenována pomocí atributu aria-label nebo aria-labelledby, např. aria-label=“Hlavní“. Slovo „navigace“ nebo „menu“ již v názvu není třeba uvádět, doplní jej odečítač sám.
Mezi další užitečné oblasti stránky může patřit vyznačení drobečkové navigace pomocí <nav role=“navigation“ aria-label=“Nacházíte se zde“> nebo obalení prvků pro vyhledávání na webu do elementu <form role=“search“>.

Obecně je při definování oblastí doporučováno upřednostňovat sémantické HTML5 elementy <header>, <main>, <nav> atd. Současným přidáním ARIA rolí ale nic nezkazíte a může to být potřebné pro zajištění zpětné kompatibility se staršími webovými prohlížeči, které tyto elementy plně nepodporují.

Používat nadpisy, oblasti nebo obojí?

Výhoda nadpisů je, že navigaci po nich umožňují i mobilní odečítače obrazovky, zatímco navigace po oblastech ve výchozím nastavení nejrozšířenějších mobilních odečítačů chybí.
Uživatelé odečítačů jsou navíc mnohem více obeznámeni s tím, jak se na stránce pohybovat pomocí nadpisů, Naproti tomu s oblastmi mnoho uživatelů pracovat neumí nebo je tolik nevyužívají, což signalizuje např. tento průzkum z roku 2024. Jde již o desátý výzkum a ani trend s ohledem na předchozí výsledky výzkumu příliš nenaznačuje, že by uživatelé s postupujícím časem funkcionalitu oblastí využívali více.
Správným vyznačením oblastí nicméně nic nezkazíte. Nadměrné používání nadpisů například pro uvození každé skupiny odkazů, vyhledávání či prvku pro změnu jazyka však může být kontraproduktivní hlavně v případě, kdy se mezi začátkem stránky a hlavním obsahem nachází jen málo prvků, a kdy chce uživatel využít skákání po nadpisech nejčastěji pro přesun někam do hlavního obsahu.

Bavíme-li se o zajištění možnosti přeskočit opakující se obsah na začátku stránky, neměli bychom opomenout, že v každém případě je dobrou praxí používat také tzv. skip link, čili vnitřní odkaz na samotném začátku stránky, který po aktivaci umožňuje uživateli skočit do jejího hlavního obsahu. V případě že je před hlavní navigací stránky prvků na začátku stránky mnoho, může přijít vhod také odkaz pro přeskočení na hlavní navigaci.

Související kritéria WCAG

Výše popsané doporučené používání nadpisů a oblastí není jen úzus či dobrá praxe, ale má oporu také v celosvětově uznávaných pravidlech přístupného webového obsahu WCAG, jehož tvůrcem je konsorcium W3C. Níže jsou uvedena hlavní kritéria úspěšnosti, jichž se používání nadpisů a oblastí pro docílení lepší přístupnosti týká.

1.3.1: Info and Relationships

Kritérium úspěšnosti 1.3.1 (úroveň A) vyžaduje, aby informace, strukturu a vztahy mezi prvky ve webovém obsahu bylo možné kromě vizuální prezentace vyjádřit také programově pomocí kódu, popřípadě jej formulovat v textu. V případě nadpisů a oblastí to tedy znamená, že by tyto měly být používány tak, aby vystihovaly informace, strukturu a vztahy prvků, které značí.

1.3.6: Identify Purpose

Kritérium úspěšnosti 1.3.6 (úroveň AAA) vyžaduje, aby účel komponent uživatelského rozhraní, ikon a oblastí bylo možné určit programově na základě kódu. V případě oblastí to znamená volbu správné role a případně pojmenování dané oblasti pomocí atributů aria-label nebo aria-labelledby.

2.4.1: Bypass Blocks.

Kritérium úspěšnosti 2.4.1 (úroveň A) vyžaduje, aby existoval způsob, jak snadno přeskočit obsah opakující se na začátku webové stránky, jako je např. hlavička s logem webu, hlavní navigace, pole pro vyhledávání a podobně. V případě elementů pro nadpisy a oblasti je to samotné používání těchto elementů na správných místech, které toto kritérium úspěšnosti splní, neboť to uživatelům asistivních technologií umožní skákání po částech webu vyznačených pomocí těchto elementů.

Hlavní doporučené techniky pro splnění uvedených kritérií úspěšnosti

Autor: Adam Samec

Štítky

přístupnost

Jak na přístupnost