Přístupnost HTML5 v kombinaci
s 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ělat
v rozumném čase.

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.

Obrázek
Text
Jednoduchý
Odkaz
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ě.

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

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émantika
Markup
JS API
Offline fungování aplikací
Kreslení v prohlížeči
atd.

Jak AT zpřístupňuje
uživateli
webovou stránku

Uživatel
s asistivní
technologií
A11y API
DOM off screen
model

Co je WAI-ARIA?

“WAI-ARIA is a specification that
provides a means of
describing roles, states, and
properties for custom
widgets so that they are recognisable
and usable by
assistive 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ávesnice
Role 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, obj
ect, 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 • height and width
• autofocus • list
• form • min and max
• formaction • multiple
• formenctype • pattern (regexp)
• Formmethod • placeholder
• formnovalidate • required
• formtarget • step

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

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

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.

Dnes nejpoužívanější řešení
<div id="menu">
<h5>Menu</h5>
<ul>
…
</div>

Vylepšení přes WAI-ARIA
<div id=„menu“
role=„navigation">
<h5>Menu</h5>
<ul>
…
</div>

WAI-ARIA a HTML5
<nav role="navigation">
<h5>Menu</h5>
<ul>
…
</nav>

Jen HTML5
<nav>
<ul>
…
</nav>

Jak odlišit dvě menu
<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>

How ARIA landmark roles help screen reader users
video 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ž dnes
lze používat
oblasti stránky
a další techniky z ARIA.

Funguje to

Kde lze použít
standardní
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 projekt
Blind 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