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