Archiv rubriky: Přístupnost webu

WAI ARIA 1.0 byla vydána jako doporučení W3C

Oznámení, Přístupnost webu,

Specifikace Accessible Rich Internet Applications (WAI-ARIA) 1.0 a WAI-ARIA 1.0 User Agent Implementation Guide byly 20. března 2014 vydány jako Doporučení W3C (W3C Recommendation). Co to v praxi znamená a jaké výhody WAI ARIA kodérům přináší?

Co je a k čemu se hodí WAI ARIA?

WAI ARIA je nástroj, který pomáhá zlepšit sémantiku webu či webové aplikace a tím poskytnout asistivním technologiím informace, které jim HTML dát nemůže. Pomáhá tedy vyřešit problémy s přístupností všude tam, kde HTML nestačí. Vývojářům nabízí:

  • Role, pomocí nichž je možné popsat jednotlivé typy widgetů, jako jsou „menu“, „treeitem“ či „slider“.
  • Role, pomocí nichž lze popsat strukturu webové stránky – tzv. oblasti stránky.
  • Vlastnosti, pomocí nichž lze popsat, v jakém stavu se jednotlivé widgety nacházejí.
  • Způsob, jak ošetřit přístupnost z klávesnice pro jednotlivé objekty na webové stránce.

WAI ARIA například velmi snadno umožňuje zlepšit přístupnost informací o webové stránce jako celku. Pomocí tzv. oblastí stránek (landmarků) je možné přiřadit role jednotlivým částem stránky a umožnit tak uživatelům nejen velmi snadno získat přehled o tom, z jakých částí se stránka skládá, ale i se na ně velmi rychle přesunout. Oproti doposud používaným nadpisům pak mají oblasti stránek nejméně dvě výhody:

  • lze pomocí nich vyznačit celou oblast (tedy ne jen její začátek, jako je tomu v případě nadpisů).
  • Lze s nimi pracovat odděleně od nadpisů. To v praxi mimo jiné znamená, že uživateli už se při orientaci na stránce nemíchají dohromady nadpisy, které bezprostředně souvisí s hlavním sdělením stránky, a nadpisy „servisní“, které uvozují například menu, vyhledávání, atp.

Vzhledem k tomu, že nadpisy jsou stále mezi uživateli používány jako primární navigační mechanismus při pohybu po stránce a oblasti stránek nejsou ještě tak masivně používány, je vhodné tyto dva přístupy kombinovat.

V praxi to pak vypadá (a probíhá) velmi jednoduše. Pokud chceme o nějakém divu říci, že obsahuje hlavní obsah stránky, uděláme to snadno přiřazením role main. Tedy takto:

<div role=“main“>
<h1>Hlavní nadpis</h1>
Hlavní obsah stránky
</div>

Role můžeme využít nejen pro oblasti stránky, ale i pro sémantický popis jednotlivých HTML elementů. Pokud div obsahuje například seznam (listbox), můžeme díky WAI ARIA tuto skutečnost sdělit asistivní technologii (například screen readeru) a ta bude na obsah tohoto divu následně nahlížet jako na seznam.

Pomocí WAI ARIA pak můžeme u jednotlivých elementů (widgetů) popsat i to, v jakém se nacházejí stavu – tedy jestli jsou rozbaleny nebo sbaleny, zda je editační pole ve formuláři povinné, atp. Pokud stránka obsahuje nějaký dynamicky měnící se obsah, i ten lze pomocí WAI ARIA zpřístupnit.

Poslední, ale neméně důležitou oblastí, kde WAI ARIA pomáhá, je pak zlepšení přístupnosti z klávesnice. Zatímco u HTML 4.01 je možné se z klávesnice dostat pouze na odkazy a formulářové prvky, WAI ARIA rozšiřuje přístupnost z klávesnice tím, že umožňuje přiřazení vlastnosti tabindex jakémukoliv elementu.

Jak je na tom WAI ARIA s podporou v prohlížečích?

Podpora WAI ARIA je na velmi slušné úrovni jak v moderních prohlížečích, tak v asistivních technologiích, takže ani z praktického úhlu pohledu není nejmenší důvod ji nepoužívat.

Kdy použít některou z technik z WAI ARIA?

Odpověď je velmi jednoduchá – pokaždé, když nám k zajištění bezproblémové přístupnosti nedostačují prostředky, které nabízí HTML. WAI ARIA se také hodí v situacích, kdy je přístupnost řešena ex post a není již možné jednoduše zasahovat do kódu webu či aplikace. Je potřeba vyznačit jednotlivé oblasti stránky? Zpřístupnit formulářové prvky? Zlepšit přístupnost z klávesnice? K tomu všemu se WAI ARIA naprosto perfektně hodí.

K čemu se WAI ARIA nehodí?

Ke všemu, co lze udělat pomocí nativního HTML. Připomeňme si, že WAI ARIA nemění chování prohlížeče, ale jen poskytuje asistivním technologiím informace, které by jinak nemohly získat. Pokud tedy například uděláme z divu přepínač, musíme se pak postarat i o jeho přístupnost z klávesnice, reakci na stisknutý Enter/Mezerník a vůbec všechny vlastnosti, které má má mít přepínač.

Pro získání základního přehledu o tom, k čemu je možné WAI ARIA (v kombinaci s HTML5) použít, nabízím slajdy k mé loňské prezentaci, případně odkazy na další zdroje na konci tohoto článku.

>Pokud ještě WAI ARIA nepoužíváte, určitě to zkuste – většina věcí nevyžaduje zdlouhavé studium spousty materiálů a dá se implementovat prakticky okamžitě.

Komentované slajdy k prezentaci Jak může HTML5 a WAI ARIA zlepšit virtuální prostor univerzity

Související odkazy

Co se mi líbí na cajtydne.cz z hlediska přístupnosti

Přístupnost webu,

To, že se snažím propagovat přístupnost pozitivně místo neustálého poukazování na chyby, je o mně myslím docela známo. Chybami se člověk učí… ale špatně, napsal kdysi Marek Prokop. Rád bych tedy čas od času představil weby, které mají přístupnost slušně vyřešenu, a ukázal dobrou praxi v této oblasti. No a čím jiným začít, než webem, na jehož přípravě se právě Marek podílí. Tím webem je Čaj týdne a líbily se mi na něm následující věci:

  • Bezproblémová přístupnost z klávesnice. Webové rozhraní Čaje týdne je bezproblémově dostupné a ovladatelné z klávesnice, což umožňuje i uživatelům, kteří k práci s webem používají pouze klávesnici, tento web bez problémů používat.
  • Čitelnost textu a dostatečný barevný kontrast. Dostatečně velké písmo, žádné rušivé prvky, které by při čtení odváděly pozornost jinam, vhodně zvolené a dostatečně kontrastní barvy, to vše přispívá k bezproblémové čitelnosti obsahu tohoto webu.
  • Robustní a logická struktura nadpisů. Nadpisy patří k základním orientačním bodům na webové stránce a z hlediska . Stránka Cajtydne.cz je pomocí nadpisů dostatečně a vhodně strukturována, takže například nevidomí uživatelé se mohou v obsahu velmi snadno zorientovat a v případě potřeby se snadno přesunout na tu část stránky, která je právě zajímá.
  • Přístupný objednávkový formulář. Jistě by bylo chybou, kdyby formulář tvořil bariéru a čaj by nebylo možné si objednat. Na Čaji týdne tomu tak naštěstí není a objednávkový formulář je bez obtíží přístupný jak po stránce technické (každý formulářový prvek má přiřazen relevantní textový popisek), tak obsahové, kdy je na první pohled zřejmé, co a kam zadat. To, že autoři stránky nehází uživatelům pod nohy klacky v podobě CAPTCHA, je pak jen příjemným bonusem.
  • Responzivní design. Ať už si o responzivním webdesignu myslíte cokoliv, pravdou je, že dobře vytvořený responzivní web může výrazně pomoci i přístupnosti. Ať už kvůli tomu, že takto vytvořené weby zpravidla neobsahují žádný balast a uživatel se může soustředit přímo na hlavní sdělení, nebo proto, že si obsah může pohodlně přečíst na libovolném zařízení. Slabozrakým uživatelům pak responzivní design umožňuje zmenšením velikosti okna prohlížeče vyhnout se horizontálnímu scrollování v případě, kdy používají softwarovou lupu, a obsah webu scrollovat jen vertikálně. Což je pro práci (nejen) s webem mnohem pohodlnější.
  • Srozumitelnost obsahu a bezproblémový průchod objednávkou. Přehledné strukturování obsahu, dobrý copywriting, zajímavý obsah, jasná výzva k akci – to vše velmi usnadňuje konverzi návštěvníka v zákazníka a motivuje jej k nákupu čaje.
  • Zpřístupnění nejen webu, ale i výrobků. Nejen já jsem byl s přístupností webu spokojený. I pro mé nevidomé kolegy bylo nakupování na Čaj týdne radostí. Aby si mohli doma sami vybrat a uvařit čaj, který si koupili, přišly jim čaje hmatově označené. Sympatický krok od provozovatelů webu.

Podtrženo, sečteno – Čaj týdne je bezproblémově přístupný obchod s čajem, na kterém se dá velmi jednoduše nakoupit jak z mobilu, tak třeba i pomocí screen readeru (nebo z mobilu pomocí screen readeru 😉

Roman Kabelka na Twitteru: Poznávací balíček čajomila zcela zpotřebován. Napsal jsem při něm velkou část diplomky - pán Bůh zaplať.