Devel.cz Lupa Měšec Podnikatel Root Zdroják.cz DigiZone Slunečnice Vitalia TopDrive KupDnes Navrcholu NovýTarif Dobrý web Weblogy Woko Jagg Computer.cz SK: MojeLinky

Hlavní navigace

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í.

Tweetni to Twitter Jaggni to! Jagg Del.icio.us Delicious

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 Pavlíček

Radek Pavlíček
Od roku 1998 se věnuje speciální informatice pro lidi s těžkým
postižením zraku. Pod hlavičkou projektu Blind Friendly Web se věnuje
přístupnosti webových stránek.

Roman Kabelka

Roman Kabelka

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.

Workshop uživatelského testování použitelnosti

DW - Školení použitelnosti
  • Dokonalý web sám od sebe nikdo nevymyslí.
  • Otestujte své řešení se skutečnými uživateli.
  • Naučíme vás, jak testovat rychle, levně a efektivně.
  • Během testování může moderátor udělat desítky chyb - vyvarujte se jich

Detailní informace o workshopu uživatelského testování »

Přehled názorů

v mnoha věcech nesouhlasím
Josef Richter 20. 10. 2010 11:42
Nový
└ 
Re: v mnoha věcech nesouhlasím
Honza 21. 10. 2010 08:24
Nový
 
└ 
Re: v mnoha věcech nesouhlasím
Josef Richter 21. 10. 2010 11:07
Nový
 
 
└ 
Re: v mnoha věcech nesouhlasím
Brbla80 21. 10. 2010 20:38
Nový
 
 
 
├ 
Re: v mnoha věcech nesouhlasím
Josef Richter 22. 10. 2010 10:03
Nový
 
 
 
└ 
Re: v mnoha věcech nesouhlasím
Josef Richter 22. 10. 2010 10:15
Nový
 
 
 
 
└ 
Re: v mnoha věcech nesouhlasím
Brbla80 22. 10. 2010 11:42
Nový
 
 
 
 
 
└ 
Re: v mnoha věcech nesouhlasím
Josef Richter 23. 10. 2010 21:21
Nový
hierarchie nadpisů
jirka vrba 20. 10. 2010 21:54
Nový
└ 
Re: hierarchie nadpisů
Radek Pavlíček 20. 10. 2010 22:45
Nový
 
└ 
Re: hierarchie nadpisů
jirka vrba 20. 10. 2010 23:32
Nový
 
 
└ 
Re: hierarchie nadpisů
Radek Pavlíček 20. 10. 2010 23:51
Nový
 
 
 
└ 
Re: hierarchie nadpisů
jirka vrba 21. 10. 2010 09:14
Nový
       

Tento text je již více než dva měsíce starý. Chcete-li na něj reagovat v diskusi, pravděpodobně vám již nikdo neodpoví. Pro řešení aktuálních problémů doporučujeme využít naše diskusní fórum.

Zasílat nově přidané příspěvky e-mailem