V minulém díle jsme se seznámili s tím, co je WAI-ARIA a jaké výhody z hlediska přístupnosti přináší. Pro pořádek si připomeňme, že WAI-ARIA je specifikace, nabízejí prostředky pro popsání rolí, stavů a vlastností jednotlivých částí stránky tak, aby byly rozpoznatelné a použitelné i pro návštěvníky, kteří používají asistivní technologie. WAI-ARIA  tedy posouvá přístupnost dál a uživatelům asistivních technologií nabízí možnosti používat weby, které by pro ně jinak byly obtížně (či vůbec) přístupné.

WAI-ARIA je už dnes podporována ve většině aktuálních verzí prohlížečů a asistivních technologií. Její podpora sice (zatím) není komplexní, ale řadu věcí už dnes (či v blízké budoucnosti) můžete bez problémů používat. Tam, kde je WAI-ARIA podporována, přináší významnou přidanou hodnotu z hlediska přístupnosti, tam, kde podporována není, nepůsobí žádné problémy s kompatibilitou. Ukažme si dva hlavní problémy, které WAI-ARIA řeší.

Struktura dokumentu

V současné době (X)HTML nenabízí žádný mechanismus, kterým by se dal programově rozpoznat účel a funkce jednotlivých částí stránky. V kódu nemůžete definovat hlavní obsah, navigaci, vyhledávání, logo, atp., tak aby tyto oblasti byly například screenreadery schopny identifikovat a informace o struktuře stránky poskytnout svým uživatelům. Situace se dnes zpravidla řeší pomocí odkazů pro přeskočení na určitou část stránky (Přejít na obsah | navigaci | vyhledávání) a skrytých pomocných nadpisů, což ale není systémové řešení.

WAI-ARIA přináší atribut role a nabízí tak tvůrcům webů možnost přiřadit jednotlivým oblastem stránky informaci o tom, jakou má ta která část stránky roli. Možné hodnoty atributu role jsou:

• banner – oblast stránky, která slouží k identifikaci webu, například název webu, titulek stránky či logo.
• navigation – oblast stránky, která obsahuje navigační odkazy/navigaci.
• main – hlavní obsah stránky.
• search – formulář pro vyhledávání.
• article – oblast stránky, která dává smysl sama o sobě nezávisle na zbytku dokumentu. Příkladem může být příspěvek na blogu či příspěvek v diskusním fóru.
• complementary – oblast stránky s doplňkovým/pod­půrným obsahem k hlavnímu obsahu stránky.
• contentinfo – oblast stránky s informacemi o copyrightu, zápatí stránky.

Použití tohoto řešení není omezeno jen na RIA, můžeme je použít na jakékoliv webové stránce. Nejnovější verze screenreaderu JAWS 10 (v ČR ještě není distribuována, momentálně probíhají práce na její lokalizaci) už umí s těmito orientačními body na stránce (v angličtině se pro ně používá termín Landmarks) pracovat. Uživatel je při načtení stránky informován o počtu takto definovaných oblastí, pokud při procházení stránky na tuto oblast narazí, je mu ohlášena a kromě toho má také k dispozici funkce, umožňující mu nechat si zobrazit jejich seznam a přesunout se na požadovanou oblast.

Jak definovat jednotlivé oblasti

Definování  oblastí je velmi snadné. K prvku, kterému chceme přiřadit konkrétní roli, doplníme atribut role. Například navigační část stránky vyznačíme následovně:

<ul role="navigation"><li><a href="...">...</a></li>...</ul> 

Obrázek 1: Ukázka přiřazení landmarků jednotlivým částem stránky

Funkce landmarků je momentálně suplována skrytými pomocnými nadpisy nad jednotlivými částmi stránky. Poté, co bude podpora landmarků dostatečná i v jiných asistivních technologiích a začnou je používat i tvůrci webů, bude možné od používání skrytých nadpisů upustit, nadpisy používat v souladu s jejich původním určením a pro vyznačování jednotlivých částí stránek používat landmarky, které jsou pro definování významu jednotlivých částí stránky mnohem vhodnější.

Příkladem webu, který už dnes vyznačování oblastí používá, je například web CodeTalks, který má definovány následující oblasti – banner, search, navigation, main, contentinfo. JAWS 10, který pro testování používáme, je uživateli zpřístupní mimo jiné i pomocí následujícího seznamu:

Obrázek 2: ukázka zpřístupnění landmarků screenreaderem JAWS 10

Přístupnost z klávesnice

V HTML mohly získat focus z klávesnice pouze odkazy a formulářové prvky. Což znamená, že při procházení webu pomocí tabulátoru jsme se dostali pouze na následující prvky – a, area, button, input, object, select a textarea. Pořadí, v jakém jsou prvky procházeny, jsou dány buď pořadím v kódu, případně je možné je změnit atributem tabindex.

Řada handicapovaných uživatelů webu je schopna web ovládat pouze z klávesnice, je tedy nutné, aby ovladatelnost webu z klávesnice byla zajištěna i v RIA. ARIA proto rozšiřuje možnosti atributu tabindex a umožňuje je přiřadit jakémukoliv prvku stránky. Pokud prvku přiřadíme tabindex=„0“, bude možné se na něj dostat i z klávesnice v pořadí, určeném kódem stránky. Pokud chceme, aby prvek nebyl zařazen do tab orderu (tzn. nedalo se na něj dostat klávesou tabulátor), ale aby se mu dal focus přiřadit programově, definujeme mu tabindex=„-1“.

Příkladem použití kombinace tabindex=„0“ a tabindex=„1“ může být menu, které bude mít definován tabindex=„0“ (tzn. bude se na něj dát dostat pomocí tabulátoru), ale položky budou mít definován tabindex=„-1“. Položky menu ale budou naprogramovány tak, aby se daly ovládat kurzorovými šipkami. Toto řešení bude výhodné v tom, že uživatelé nebudou muset při procházení stránky tabulátorem přejít přes každou položku menu, ale pokud budou chtít s menu pracovat, mohou jej z klávesnice bez problémů ovládat. Příklad takového menu je k dispozici na YAHOO USER INTERFACE BLOG, odkud pochází i následující vi­deo:

Video Menu Button Using Roaming TabIndex Technique

Pokračování příště

Příště se podíváme, jak ARIA pomáhá řešit dynamické změny obsahu.