Přístupnost HTML5 v kombinacis WAI-ARIA

Radek PAVLÍČEK

Jak může HTML5 s WAI-ARIA pomoci zlepšit přístupnost webu? Jaké problémy řeší?

Přístupnost

Dostupnost

Uživatel se musí být schopen k informacím dostat.

Ovladatelnost

Pokud se uživatel na web dostane, musí být schopen jej ovládat.

Srozumitelnost

Prezentovaný obsah musí být srozumitelný pro uživatele.

Orientace

Uživatel se musí být schopen dostat tam, kam potřebuje.

Čas

Toto všechno musí být schopen udělatv rozumném čase.

Komupřístupnostpomáhá?

Přístupnost pomáhá lidem s nejrůznějším zdravotním postižením: lidem nevidomým, slabozrakým, tělesně či sluchově postiženým, lidem s kognitivními poruchami či poruchami učení.

Přístupnost není jen pro handicapované

Pro přístup k webu slouží uživatelům nejrůznější techologie či zařízení.

Například notebook se screen readerem a softwarovou lupou.

Hmatový displej (braillský řádek).

Stolní počítač se softwarovou lupou.

VÝZNAM POMŮCEK PRO ZAČLENĚNÍ DO SPOLEČNOSTI

Či ozvučený mobilní telefon.

Tenkrát…

Text

Odkaz

Obrázek

Jednoduchý formulář

Kdysi web byl velmi „strohé“ prostředí a jeho zpřístupnění bylo relativně nenáročné. I asistivní technologie měly funkce poplatné době.

…a dnes

Web je multimediální prostor, v němž můžeme narazit na jakýkoliv typ obsahu. Asistivní technologie nabízí svým uživatelům spoustu funkcí.

Přístupnostnení

černobílá

V přístupnosti už dávno nerozlišujeme pouze dva stavy – je a není přístupný.

Přístupnost je dnes „šedá zóna“, v níž existuje více způsobů nahlížení na (ne)přístupnost konkrétních technik a současně více než jedna možnost řešení daného problému.

Co je HTML5?

SémantikaMarkupJS API

Offline fungování aplikacíKreslení v prohlížeči

atd.

Jak AT zpřístupňujeuživateli

webovou stránku

Uživatels asistivní

technologií

A11y APIoff screen

modelDOM

Co je WAI-ARIA?

“WAI-ARIA is a specification that provides a means ofdescribing roles, states, and properties for customwidgets so that they are recognisable and usable byassistive technology users.”

Gez Lemon, Introduction to WAI-ARIA

WAI-ARIA je dnes součástí HTML5.

WAI-ARIA přemosťuje nedostatky v přístupnosti vzniklé skriptováním či takové, nelze řešit pouze pomocí HTML.

Proč WAI-ARIA?

Slabá místa v HTML

Dynamické změny obsahu

Rozsáhlé webové aplikace

WAI-ARIA neřeší vše

Jsou situace, kdy WAI-ARIA nepomůže. Ale to není důvod ji nepoužívat, protože pokud ji na svém webu použijete, tak tím chybu neuděláte a vaši uživatelé mohou z WAI-ARIA jen získat.

Podpora WAI-ARIA

WAI-ARIA má dnes širokou podporu na straně prohlížečů, asistivních technologií i některých Javascriptových knihoven.

Podpora HTML5

www.html5accessibility.com

Co přinášíWAI-ARIA?

Navigaci z klávesniceRole a stavy

„Živé oblasti“Oblasti stránky

a spoustu dalších věcí

Navigace z klávesnice

V HTML 4 mohly získat focus z klávesnice pouze

a, area, button, input, object, select a textarea.

WAI-ARIA

Možnost přiřadit tabindex jakémukoliv prvku.

Jak si to otestovat?

Živé oblasti

Asistivní technologie neumí upozornit uživatele na dynamické změny obsahu na stránce. I toto ale lze jednoduše ošetřit pomocí WAI-ARIA.

Screen Reader & Javascript - AJAX updates with WAI-ARIA Live Regions - video

http://youtu.be/jFB_zJE_pjY

Formuláře (role a stavy)

Nové atributy pro <input>• autocomplete• autofocus• form• formaction• formenctype• Formmethod• formnovalidate• formtarget

• height and width• list• min and max• multiple• pattern (regexp)• placeholder• required• step

<label>Barva: <select name=color required aria-required="true"> <option value="">Vyberte barvu <option>Červená<option>Zelená<option>Modrá</select></label>

WAI-ARIA a HTML5

<label>Barva: <select name=color required><option value="">Vyberte barvu<option>Červená<option>Zelená<option>Modrá</select></label>

HTML5

Oblasti stránky, strukturování

Nadpisy

Jako hlavní nástroj pro strukturování stránek se dnes stále používají nadpisy – ať už ty viditelné, nebo vhodně skryté. Tato technika je dnes nepsaným standardem.

Nevýhodou tohoto řešení je to, že nadpisem jsme schopni vyznačit pouze začátek konkrétní oblasti, ale už ne její konec.

Osnova stránky, vytvořená z jednotlivých nadpisů, tedy může vypadat například takto.

To, jak bude osnova stránky vypadat, si můžeme ověřit například pomocí plug-inu Web Developer Toolbar pro Mozilla Firefox.

Stejně dobře nám ve stejném prohlížeči poslouží rozšíření HeadingsMap.

Mohu strukturování nějak zlepšit?

Řešením jsou oblasti stránky (landmarks) ze specifikace WAI-ARIA.

<div id="menu"><h5>Menu</h5><ul>…</div>

Dnes nejpoužívanější řešení

<div id=„menu“ role=„navigation"><h5>Menu</h5><ul>…</div>

Vylepšení přes WAI-ARIA

<nav role="navigation"><h5>Menu</h5><ul>…</nav>

WAI-ARIA a HTML5

<nav><ul>…</nav>

Jen HTML5

<div role=„navigation„ aria-label=„Hlavní menu“><h5>Hlavní menu</h5><ul> … </div>

<div role=„navigation„ aria-label=„Menu sekce“><h5>Menu sekce</h5><ul>… </div>

Jak odlišit dvě menu

How ARIA landmark roles help screen reader usersvideo ukázka

http://youtu.be/IhWMou12_Vk

Pro zobrazení jednotlivých rolí prvků na stránce mohu opět použít Web Developer Toolbar.

Nebo rozšíření Landmarks.

Zapamatujte si

Už dneslze používat

oblasti stránkya další techniky z ARIA.

Funguje to

Kde lze použítstandardní

HTML prvky, použijte je.

Kdy WAI-ARIA nepoužít?

Když stejně dobře poslouží „staré dobré“ HTML.

Dívejme se dopředu…

…ale buďme nohama na zemi.

Zpětná kompatibilita je důležitá.

Jak vám může pomoci projektBlind Friendly Web

Osvěta

Školení

Testování

Rady, tipy, know-how

V současnosti nejlepší kniha o přístupnosti HTML5. Další informace najdete i v mých článcích na www.zdrojak.cz.

Kontaktní informace

pavlicek@blindfriendly.cz

@radlicek

Photo credits• http://www.flickr.com/photos/nationaalarchief/4025536029/• http://www.flickr.com/photos/cornelluniversitylibrary/3678984206/• http://www.flickr.com/photos/30795657@N00/434222764/• http://www.flickr.com/photos/30072283@N00/4782154855/• http://www.flickr.com/photos/_sk/4042566406/sizes/o/in/photostream/• http://www.flickr.com/photos/51035702460@N01/19245594/• http://www.flickr.com/photos/jasonpearce/136206624/sizes/l/in/photostream/• http://www.pooh.cz/upload/img/1000/trattoria-laura-facebook-faux-pas-2.png• http://lorenc.info/3MA381/tabulatory.htm• http://www.bibri.net/wp-content/uploads/2009/11/Ubuntu-910-obsah1.jpg• http://4.bp.blogspot.com/__1B7eTIn3jM/SoMylQ_RqWI/AAAAAAAAAAw/F8u_jtyp3IA/s400/Learn-Hiragana.jpg• http://www.mariezabranska.com/pict/textil/16.jpg• http://www.stanford.edu/group/accessibility/cgi-bin/presentations/html5_a11y/images/HTML5_braille.png • http://pulllava360.saturn.netdna-cdn.com/wp-content/uploads/2011/08/html5_code.jpg • http://www.flickr.com/photos/national_library_of_australia_commons/6173531979/ • http://www.flickr.com/photos/bibliothequedetoulouse/7942246450/ • http://www.ixibo.com/wp-content/uploads/2010/12/web-browsers.jpg • http://blogs.telerik.com//Libraries/Carl_Bergenhem_s_Library/waiaria_001.sflb • http://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Nasa_earth.jpg/800px-Nasa_earth.jpg• http://tapetky.kx.cz/files/hokej3.jpg