Přejít k navigační liště

Zdroják » Webdesign » Přístupnost RIA – přístupnost widgetů

Přístupnost RIA – přístupnost widgetů

Články Webdesign

Dnešní díl seriálu o přístupnosti RIA bude věnován problematice přístupnosti interaktivních prvků na stránkách. Podíváme se, jaké problémy s přístupností s sebou přináší, seznámíme se s tím, jak při jejich zpřístupnění pomáhá WAI-ARIA a vyzkoušíme si, jak si s nimi v reálu poradí screenreader JAWS ve verzi 10.

Widgety – interaktivní prvky na webových stránkách, které jsou vytvořeny či jejichž ovládání je závislé na skriptování – doposud působí velké problémy z hlediska přístupnosti. Jedná se buď o prvky, které nejsou vytvořeny standardním způsobem (tlačítko není tlačítko, ale nastylovaná a oskriptovaná část textu), nebo standardním způsobem sice vytvořeny jsou, ale jejich možnosti jsou výrazně rozšířeny pomocí skriptů.

Příklady widgetů mohou být různé typy rozbalovacích menu, posuvníky, položky ve stromové struktuře, drag and drop prvky, atp. Přístupnost takových prvků obvykle není samozřejmá. Skriptováním sice lze určitý stupeň přístupnosti docílit, ale v mnoha případech je to docela obtížné a navíc neexistuje standardizovaný způsob, jak přístupnost takového prvku zajistit. Přístupnost těchto prvků navíc závisí také na tom, jaká asistivní technologie je na straně klienta použita (různé screenreadery si umí s těmito prvky poradit různě).

Přístupnost widgetů

Typickým příkladem může být rozbalovací menu. To se dost často používá v navigačních částech stránky, protože nabízí větší funkcionalitu a zabírá méně místa. Rozbalovací menu už sice dnes přístupně vytvořit lze, ale takřka vždy za cenu menšího komfortu při práci se stránkou. Jenom pro připomenutí, rozbalovací menu lze zpřístupnit například tak, že z položky menu na první úrovni vytvoříme odkaz, který vede na stránku se seznamem odkazů z podmenu či umožníme uživateli projít pomocí tabulátoru všechny položky z podmenu. Obě řešení sice technicky zajistí přístupnost položek z podmenu, ale pro uživatele nemusí být tento způsob příliš uživatelsky příjemný – v prvním případě je to pro něj krok navíc, druhý zase obnáší protabování se spoustou odkazů, které jej v dané chvíli vůbec nezajímají.

Problémy s přístupností se ale týkají i jiných interaktivních prvků – jak například zajistit přístupnost drag and drop prvku z klávesnice? Jak poskytnout uživateli informace o pozici ve stromové struktuře a právě aktivním prvku? Jak zpřístupnit nevidomým návštěvníkům vizuální tooltipy nebo obsah zpráv ve vyskakovacích oknech?

WAI-ARIA naštěstí řadu těchto přístupnostních problémů umožňuje tvůrcům RIA pomocí definování rolí, vlastností a hodnot vyřešit. K testování jsem opět použil screenreader JAWS verze 10 a Firefox ve verzi 3. Příklady jsem vybíral tak, aby nebyly úplně triviální, byly zajímavé, ukázaly potenciál WAI-ARIA, skutečně fungovaly a mohly být tedy v případě potřeby použity pro řešení reálných situací.

Posuvník

Přístupnost widgetů

I takový prvek, jako je posuvník, není s pomocí WAI-ARIA problém zpřístupnit. Uživatele ve chvíli, kdy se na tento prvek přesune, zajímá, že se jedná o posuvník, jaká je jeho aktuální hodnota a v případě, kdy začne posuvník ovládat, jak se jeho hodnota mění. Příklad jednoduchého a funkčního posuvníku je k dispozici na webu CodeTalks.

Použité značkování:

  • role=„slider“
  • aria-valuemin, aria-valuenow, aria-valuemax

Informace ve stromové struktuře

Přístupnost widgetů

Při procházení stromovou strukturou je pro uživatele důležité dostávat ve správnou chvíli správné informace. Při přesunu na stromovou strukturu jej pochopitelně nejdříve zajímá, na jaký objekt že se to dostal, tzn. přivítá informaci o tom, že se jedná o stromovou strukturu. Při jejím procházení jsou pak pro něj důležité informace o tom, na jaké úrovni se v rámci stromu nachází, zda lze položku rozbalit/sbalit, o kolikátou položku se jedná, atp.A samozřejmě, zda lze stromovou strukturu standardním způsobem procházet z klávesnice. Příklad přístupné stromové struktury najdeme na webu CodeTalks a po otestování její přístupnosti se screenreaderem JAWS 10 zjistíme, že uživatelé JAWS 10 mohou s touto stromovou strukturou bez problémů pracovat.

Použité značkování:

  • role=„tree“, „treeitem“, „group“, „presentation“
  • aria-level, aria-setsize, aria-posinset
  • aria-expanded

Táhni a pusť (Drag and drop)

Akci typu drag and drop lze díky WAI-ARIA provést z klávesnice. Její použití si ukážeme v aplikaci Slideshow na webu CodeTalks. Ovládat tuto aplikaci z klávesnice si můžete zkusit i bez toho, aniž byste měli k dispozici screenreader. Pro pohyb mezi zásobníkem obrázků a slideshow použijte tabulátor, pro vybrání a položení obrázku mezerník, šipkami vlevo a vpravo se pohybujete mezi obrázky a klávesou Esc. Co v tomto příkladu nefunguje, je možnost smazání obrázku, který je vložen do slideshow. Při ovládání aplikace se screenreaderem se uživatel opět díky WAI-ARIA dozví v danou chvíli právě to, co potřebuje. Při přesunu na seznam obrázků se dozví, že je na seznamu obrázků, pozici a informaci, že lze obrázek přetáhnout. Při přesunu na slideshow je i v případě, kdy slideshow obsahuje nějaké obrázky, ohlášeno, že slideshow žádné obrázky neobsahuje, ale při pohybu pomocí šipek jsou čteny jednotlivé názvy obrázků včetně pozice a jsou i ohlašována místa, na které lze přesouvaný obrázek vložit.

Použité značkování:

  • Role
    • role=„application“
    • role=„button“
  • Stavy a vlastnosti
    • aria-labelledby
    • aria-disabled
    • aria-grab
    • aria-dropeffect

Přístupnost widgetů

Menu

Posledním prvkem, který si dnes ukážeme, je menu. Příklady přístupných menu najdeme na Dijit Menu System Test či stránce Accessible Widgets na webu CodeTalks. Obě menu jsou bez problémů přístupná a ovladatelná z klávesnice. V druhém případě menu není dostupné tabulátorem, ale až po stisku klávesové zkratky Ctrl+Alt+M, což se může jevit jako nevýhoda, ale toto řešení umožňuje uživateli kdykoliv menu touto klávesovou zkratkou vyvolat. Odezva při použití screenreaderu je prakticky stejná jako při práci s aplikačním menu v jakékoliv standardní aplikaci ve Windows – uživatel je informován o pozici, typu položky, o tom, zda položka má či nemá podmenu, atp. Uživatel si na ovládání takto vytvořeného menu velmi rychle zvykne a může je bez problémů používat, protože se pohybuje v pro něj známém prostředí a způsobem, který už umí. Ovládání z klávesnice je opět možné si vyzkoušet i bez screenreaderu.

Přístupnost widgetů

Použité značkování:

  • role=„menubar“, role=„menu“, role=„menuitem“, role=„menuitem­checkbox“, role=„menuitem­radio“
  • aria-haspopup=„true“
  • aria-disabled=„true“

A to je pro dnešek vše, příště se podíváme na to, jak jsou na tom s přístupností dnes již běžně používané RIA aplikace, například Gmail, Google Docs či Google Talk.

Komentáře

Subscribe
Upozornit na
guest
0 Komentářů
Inline Feedbacks
View all comments

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.