Cesty k přístupné navigaci

Přístupná, snadno nalezitelná a pochopitelná navigace je jedním ze základních předpokladů k tomu, aby se na webové prezentaci zorientoval každý návštěvník, který na ni zavítá. Pojďme si prakticky ukázat, jak vytvořit navigaci, se kterou si bez problémů poradí i uživatelé asistivních technologií.

Tvoříme-li web, který má řádově desítky stránek, nevyhneme se navigaci s více úrovněmi. Stromová struktura webu je univerzální a aplikovatelná na web jakéhokoli typu a zároveň umožňuje uživateli rychlé dosažení požadovaných informací, což je skutečnost známá i z vyhledávacích stromů v databázích.

Je však na zodpovědnosti webdesignéra navrhnout víceúrovňovou navigaci tak, aby byla pro uživatele intuitivní a měla výše zmíněné benefity. Na otázku „jak toho dosáhnout?“ existuje hned několik odpovědí. Pojďme si představit nejběžnější typy navigací a upozornit na jejich výhody a nevýhody z hlediska přístupnosti.

Vícebloková navigace

Každá úroveň navigace na stránce má vymezenu svou oblast, v níž se nabízí položky menu. Při dvou úrovních jde o klasické dělení na hlavní menu a vedlejší (kontextové) menu, přičemž hlavní menu zůstává statické a vedlejší se mění v závislosti na aktivní položce z menu hlavního.Pokud je splněn předpoklad, že takové bloky navigace jsou řádně uvozeny nadpisy, je přístupnost takové navigace vždy bezproblémová, neboť se jedná o model nadpisu a jednoduchého odrážkového seznamu, jenž je dobře obsluhovatelný i pomocí screenreaderu. Pomocí vhodných definic stylů lze v případě potřeby takový navigační blok nastylovat včetně skrytí nadpisu mimo viditelnou oblast stránky či uspořádat položky seznamu do horizontální polohy bez odrážek. Příkladů správného řešení dnes už naštěstí najdeme spoustu. Ukažme si alespoň dva. Ten první najdeme na webu Knihovny digitálních dokumentů.

Na stránce se základním vyhledáváním jsou dvě navigace. Hlavní navigace, která je na všech stránkách stejná.

A navigace sekce, která se liší v jednotlivých sekcích webu.

Obě navigace jsou korektně vyznačeny nadpisy třetí úrovně a skryty pomocí absolutního pozicování mimo viditelnou oblast obrazovky. Druhým příkladem může být například web našeho projektu Blind Friendly Web, kde je navigace na jednotlivých podstránkách řešena podobně jako na webu Knihovny digitálních dokumentů.

Statický víceúrovňový seznam

Jedná se většinou o vertikální menu, které ve výchozí poloze zobrazuje první úroveň navigace. Po aktivaci některé z položek je načtena nová stránka a v menu u aktivované položky se zobrazí podseznam s další nabídkou.

Z hlediska přístupnosti zde na první pohled opět problém není, pokud je navigace řádně uvozena nadpisem. Komplikace je ovšem v tom, že uživatel odečítače se o zobrazení podmenu v hlavní navigaci vůbec nemusí dozvědět, resp. ho nemusí napadnout si navigaci znovu přečíst a narazit na změnu. Načtená stránka může být natolik bohatá, že pomyšlení na vyhledání souvisejících stránek na stejné úrovni navigace zkrátka uživateli na mysl nepřijde, a přitom se na těchto stránkách mohou nacházet zásadní informace.

Řešení se nabízí několik:

  1. Na počátku stránky uvést skrytou pomocnou navigaci pro uživatele odečítačů, jež bude obsahovat též odkaz s odskokem na kotvu umístěnou před rozbaleným podmenu. Protože však ne všichni uživatelé jsou zvyklí používat toto pomocné menu, je vhodné tuto variantu kombinovat i s některou s dalších variant.
  2. Na konec nebo začátek hlavního obsahu stránky uvést skrytý odkaz s odskokem na kotvu zmíněnou v předchozím bodě.
  3. Položku, jež je v menu rozbalená a obsahuje podmenu, vyznačit méně významovým nadpisem úrovně 4–6, který při procházení stránky po nadpisech upozorní na existenci příslušného podmenu.
  4. U položky, která při své aktivaci načte novou stránku a zároveň na této stránce bude tato položka obsahovat podmenu, uvést skrytý text s informací, že položka bude rozbalena. Lze též použít odpovídající grafické ikony s řádnými alternativními popisky.

Příklad vhodného řešení je například na webu obce Třebihošť. V případě, kdy položka obsahuje další podnabídku, je vyznačena jako nadpis třetí úrovně, který hierarchicky spadá pod nadpis nadpis druhé úrovně Navigace.

Dynamický víceúrovňový seznam

Skriptem nebo styly řízené menu může mít několik podob, jež představují hlavně vertikální menu v podobě stromového seznamu nebo obdobu klasického aplikačního menu – rozbalující se  vertikální nabídky z horizontální lišty. Kromě toho, že u takového typu navigace odpadá nutnost načítat stránku při aktivaci položky, která obsahuje podmenu, tak se zároveň minimalizuje odezva. Rozbalení a sbalení lze současně i animovat, což přispívá k pozitivnímu dojmu uživatele.

Dynamická navigace je dvousečnou zbraní. Lze ji udělat prakticky nepřístupnou, a v jiném případě jako nejpohodlněji přístupnou variantu víceúrovňové navigace. To, jak moc přístupná navigace bude, záleží na tom, jak vyřeší autor webu její ovládání.

Rozbalení po přejetí myší

Jedná se o nejčastější řešení dynamické navigace umožňující provádět automatické rozbalování a sbalování nabídek s vysokým uživatelským komfortem. Protože však je orientováno na uživatele výhradně ovládající web myší a uživatelé odečítačů prakticky tento způsob nemohou použít, je nutné navigaci doplnit i o ovládání z klávesnice, jak je popsáno dále.

Rozcestníky

Především pro dynamickou navigaci řízenou styly je třeba zpřístupnit nabídku podmenu alternativním způsobem, a to tak, že odkazy z hlavní úrovně, jež jsou vždy vidět, vedou na stránky obsahující seznam odkazů korespondující s položkami daného podmenu, jež je přístupné skrze příslušné styly pro přejetí myší. Ve správě webu je však nutno zajistit, aby oba způsoby navigace byly obsahově synchronizovány a nestalo se, že v dynamické navigaci budou nové položky, avšak v rozcestnících budou chybět.

Toto řešení lze v praxi najít například na webu Města Buštěhrad.

Rozbalení dle fokusu

Jako alternativu k rozbalování po přejetí myší lze použít rozbalení dle fokusu, což v praxi znamená, že pokud položka obsahující podmenu získá fokus, automaticky se rozbalí. Jistá nevýhoda spočívá ve způsobu, jak je web z klávesnice ovládán. Zatímco uživatel ovládající web myší může fokus přenést libovolně z jednoho místa na druhé, ovládání z klávesnice stále dodržuje sekvenční posun z prvku na prvek bez možnosti aktivaci fokusu některého z ovládacích prvků vynechat. To je ostatně důvod, proč jsou tzv. jumplisty implicitně problematicky přístupné. V praxi tedy uživatel odečítače procházející dynamickou navigaci reagující na fokus rozbaluje a pročítá postupně všechna podmenu a nemůže si tak nechat přečíst pouze hlavní úroveň menu a rozhodnout se, kterou položku rozbalit, zatímco uživatel ovládající web myší tuto volbu běžně má.

Rozbalení na vyžádání

Ideálním a zároveň komfortním způsobem zpřístupnění z klávesnice je vyvolávat při aktivaci odkazů z první, stále viditelné, úrovně navigace událost, která podmenu položky rozbalí, popř. sbalí. Je-li již některé podmenu rozbalené, zabalí se a rozbalí se podmenu aktivované položky. Tímto způsobem si uživatel odečítače může volit, které podmenu si chce přečíst s tím, že ostatní podmenu jsou zabalená a navigace tak zůstává v kompaktním přehledném stavu tak, jak ji běžně vnímá uživatel používající myš.

Toto řešení lze v praxi najít například na webu firmy Microsoft.

Druhým řešením, se kterým je možné se setkat, je to, že se při rozbalení dalšího podmenu to předchozí nesbalí, ale zůstává rozbaleno. Toto řešení je použito například na webu Města Jihlavy.

Závěr

Kromě běžně používané víceblokové navigace lze z hlediska přístupnosti doporučit i dynamickou navigaci s rozbalením na vyžádání. U tohoto typu menu totiž odpadá nutnost hledat skrze seznam nadpisů část stránky, kam se podmenu zobrazí. Rovněž je takové dynamické menu vhodné doplnit o ikony stavu rozbalení indikující položky, jež mají podmenu odlišit od položek vedoucích již na konkrétní stránku.

Za prototyp ideální víceúrovňové navigace z hlediska uživatelů screenreaderů lze dnes prohlásit například tu na stránkách města Jihlavy. Na to, jak se s ní pracuje, se můžete podívat i na následujícím videu.

http://www.you­tube.com/watch?v=a­oMwnzRB2rk

Ale ani v případech, kdy použijete některé jiné řešení z těch, která jsme zde prezentovali, určitě chybu neuděláte.

Radek vystudoval informatiku na Fakultě informatiky Masarykovy univerzity v Brně. Od roku 1998 se věnuje speciální informatice pro lidi s těžkým postižením zraku.

Roman je tester přístupnosti webových stránek. Kromě testování poskytuje poradenské služby týkající se implementace přístupnosti s ohledem na nevidomé uživatele.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 13

Přehled komentářů

Josef Richter v mnoha věcech nesouhlasím
Honza Re: v mnoha věcech nesouhlasím
Josef Richter Re: v mnoha věcech nesouhlasím
Brbla80 Re: v mnoha věcech nesouhlasím
Josef Richter Re: v mnoha věcech nesouhlasím
Josef Richter Re: v mnoha věcech nesouhlasím
Brbla80 Re: v mnoha věcech nesouhlasím
Josef Richter Re: v mnoha věcech nesouhlasím
jirka vrba hierarchie nadpisů
Radek Pavlíček Re: hierarchie nadpisů
jirka vrba Re: hierarchie nadpisů
Radek Pavlíček Re: hierarchie nadpisů
jirka vrba Re: hierarchie nadpisů
Zdroj: https://www.zdrojak.cz/?p=3348