SlideShare a Scribd company logo
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

More Related Content

Similar to Přístupnost HTML5 v kombinaci s WAI-ARIA

JAWS - web očima nevidomých
JAWS - web očima nevidomýchJAWS - web očima nevidomých
JAWS - web očima nevidomých
Radek Pavlíček
 
TNPW2-2016-02
TNPW2-2016-02TNPW2-2016-02
TNPW2-2016-02
Lukáš Vacek
 
Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Pavel Růžička
 
TNPW2-2016-05
TNPW2-2016-05TNPW2-2016-05
TNPW2-2016-05
Lukáš Vacek
 
Radek Pavlíček: Přístupný web
Radek Pavlíček: Přístupný webRadek Pavlíček: Přístupný web
Radek Pavlíček: Přístupný web
KISK FF MU
 
Tvorba přístupného webu
Tvorba přístupného webuTvorba přístupného webu
Tvorba přístupného webu
Radek Pavlíček
 
TNPW2-2014-05
TNPW2-2014-05TNPW2-2014-05
TNPW2-2014-05
Lukáš Vacek
 
Pavlicek testovani webu v soutezi biblioweb
Pavlicek   testovani webu v soutezi bibliowebPavlicek   testovani webu v soutezi biblioweb
Pavlicek testovani webu v soutezi biblioweb
bezbarierovaknihovna
 
Radek Pavlíček - testování přístupnosti a použitelnosti webu
Radek Pavlíček - testování přístupnosti a použitelnosti webuRadek Pavlíček - testování přístupnosti a použitelnosti webu
Radek Pavlíček - testování přístupnosti a použitelnosti webu
Radek Pavlíček
 
Confluence_v1.4_extended
Confluence_v1.4_extendedConfluence_v1.4_extended
Confluence_v1.4_extendedPetr Holodňák
 
Přístupnost prakticky 2.0
Přístupnost prakticky 2.0Přístupnost prakticky 2.0
Přístupnost prakticky 2.0
Lukas Marvan
 
Webový front-end ve službách mobilního vývojáře
Webový front-end  ve službách mobilního  vývojáře Webový front-end  ve službách mobilního  vývojáře
Webový front-end ve službách mobilního vývojáře Martin Michálek
 
Pouzitelnost - jak mit uspesny a pratelsky web
Pouzitelnost - jak mit uspesny a pratelsky webPouzitelnost - jak mit uspesny a pratelsky web
Pouzitelnost - jak mit uspesny a pratelsky web
guest3d79a4
 

Similar to Přístupnost HTML5 v kombinaci s WAI-ARIA (20)

JAWS - web očima nevidomých
JAWS - web očima nevidomýchJAWS - web očima nevidomých
JAWS - web očima nevidomých
 
TNPW2-2011-08
TNPW2-2011-08TNPW2-2011-08
TNPW2-2011-08
 
TNPW2-2012-02
TNPW2-2012-02TNPW2-2012-02
TNPW2-2012-02
 
TNPW2-2016-02
TNPW2-2016-02TNPW2-2016-02
TNPW2-2016-02
 
TNPW2-2014-02
TNPW2-2014-02TNPW2-2014-02
TNPW2-2014-02
 
Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)Rich Internet Applications 2009 (Czech)
Rich Internet Applications 2009 (Czech)
 
TNPW2-2016-05
TNPW2-2016-05TNPW2-2016-05
TNPW2-2016-05
 
Radek Pavlíček: Přístupný web
Radek Pavlíček: Přístupný webRadek Pavlíček: Přístupný web
Radek Pavlíček: Přístupný web
 
Tvorba přístupného webu
Tvorba přístupného webuTvorba přístupného webu
Tvorba přístupného webu
 
TNPW2-2011-04
TNPW2-2011-04TNPW2-2011-04
TNPW2-2011-04
 
TNPW2-2014-05
TNPW2-2014-05TNPW2-2014-05
TNPW2-2014-05
 
Pavlicek testovani webu v soutezi biblioweb
Pavlicek   testovani webu v soutezi bibliowebPavlicek   testovani webu v soutezi biblioweb
Pavlicek testovani webu v soutezi biblioweb
 
TNPW2-2013-02
TNPW2-2013-02TNPW2-2013-02
TNPW2-2013-02
 
Radek Pavlíček - testování přístupnosti a použitelnosti webu
Radek Pavlíček - testování přístupnosti a použitelnosti webuRadek Pavlíček - testování přístupnosti a použitelnosti webu
Radek Pavlíček - testování přístupnosti a použitelnosti webu
 
Bez HTML5/CSS3 to nejde
Bez HTML5/CSS3 to nejdeBez HTML5/CSS3 to nejde
Bez HTML5/CSS3 to nejde
 
Confluence_v1.4_extended
Confluence_v1.4_extendedConfluence_v1.4_extended
Confluence_v1.4_extended
 
Přístupnost prakticky 2.0
Přístupnost prakticky 2.0Přístupnost prakticky 2.0
Přístupnost prakticky 2.0
 
Webový front-end ve službách mobilního vývojáře
Webový front-end  ve službách mobilního  vývojáře Webový front-end  ve službách mobilního  vývojáře
Webový front-end ve službách mobilního vývojáře
 
WAS 2.0 (2011)
WAS 2.0 (2011)WAS 2.0 (2011)
WAS 2.0 (2011)
 
Pouzitelnost - jak mit uspesny a pratelsky web
Pouzitelnost - jak mit uspesny a pratelsky webPouzitelnost - jak mit uspesny a pratelsky web
Pouzitelnost - jak mit uspesny a pratelsky web
 

More from Radek Pavlíček

Digitální design bez bariér
Digitální design bez bariérDigitální design bez bariér
Digitální design bez bariér
Radek Pavlíček
 
Jak na přístupnost knihovních webů
Jak na přístupnost knihovních webůJak na přístupnost knihovních webů
Jak na přístupnost knihovních webů
Radek Pavlíček
 
Jak a proč řeší velké weby přístupnost
Jak a proč řeší velké weby přístupnostJak a proč řeší velké weby přístupnost
Jak a proč řeší velké weby přístupnost
Radek Pavlíček
 
Služby Střediska Teiresiás na konferenci INSPO 2017
Služby Střediska Teiresiás na konferenci INSPO 2017Služby Střediska Teiresiás na konferenci INSPO 2017
Služby Střediska Teiresiás na konferenci INSPO 2017
Radek Pavlíček
 
Proč zavést WAG 2.0 v Česlé republice
Proč zavést WAG 2.0 v Česlé republiceProč zavést WAG 2.0 v Česlé republice
Proč zavést WAG 2.0 v Česlé republiceRadek Pavlíček
 
Hodnocení přístupnosti v soutěži Zlatý erb 2014
Hodnocení přístupnosti v soutěži Zlatý erb 2014Hodnocení přístupnosti v soutěži Zlatý erb 2014
Hodnocení přístupnosti v soutěži Zlatý erb 2014Radek Pavlíček
 
Když už Vyhláška o přístupnosti nestačí
Když už Vyhláška o přístupnosti nestačíKdyž už Vyhláška o přístupnosti nestačí
Když už Vyhláška o přístupnosti nestačí
Radek Pavlíček
 
How to improve UX by implementing accessibility - WebExpo 2013 Edition
How to improve UX by implementing accessibility - WebExpo 2013 EditionHow to improve UX by implementing accessibility - WebExpo 2013 Edition
How to improve UX by implementing accessibility - WebExpo 2013 Edition
Radek Pavlíček
 
Testování přístupnosti v soutěži Zlatý erb 2013
Testování přístupnosti v soutěži Zlatý erb 2013Testování přístupnosti v soutěži Zlatý erb 2013
Testování přístupnosti v soutěži Zlatý erb 2013
Radek Pavlíček
 
Nahradí WCAG 2.0 Vyhlášku o přístupnosti?
Nahradí WCAG 2.0 Vyhlášku o přístupnosti?Nahradí WCAG 2.0 Vyhlášku o přístupnosti?
Nahradí WCAG 2.0 Vyhlášku o přístupnosti?
Radek Pavlíček
 
Tvorba přístupných dokumentů v neziskových organizacích
Tvorba přístupných dokumentů v neziskových organizacíchTvorba přístupných dokumentů v neziskových organizacích
Tvorba přístupných dokumentů v neziskových organizacích
Radek Pavlíček
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
Radek Pavlíček
 
Jak jsou na tom parádní weby s přístupností
Jak jsou na tom parádní weby s přístupnostíJak jsou na tom parádní weby s přístupností
Jak jsou na tom parádní weby s přístupností
Radek Pavlíček
 
How to ensure accessibility of documents, published at masaryk university
How to ensure accessibility of documents, published at masaryk universityHow to ensure accessibility of documents, published at masaryk university
How to ensure accessibility of documents, published at masaryk university
Radek Pavlíček
 
How to improve UX by implementing accessibility
How to improve UX by implementing accessibilityHow to improve UX by implementing accessibility
How to improve UX by implementing accessibility
Radek Pavlíček
 
Measuring real accessibility
Measuring real accessibilityMeasuring real accessibility
Measuring real accessibility
Radek Pavlíček
 
Myslete i na přístupnost. Mobilní aplikace pro nevidomé, mDevCamp 2012
Myslete i na přístupnost. Mobilní aplikace pro nevidomé, mDevCamp 2012Myslete i na přístupnost. Mobilní aplikace pro nevidomé, mDevCamp 2012
Myslete i na přístupnost. Mobilní aplikace pro nevidomé, mDevCamp 2012
Radek Pavlíček
 
Přístupné weby knihoven
Přístupné weby knihovenPřístupné weby knihoven
Přístupné weby knihoven
Radek Pavlíček
 
Příklady dobré a špatné praxe z oblasti přístupnosti
Příklady dobré a špatné praxe z oblasti přístupnostiPříklady dobré a špatné praxe z oblasti přístupnosti
Příklady dobré a špatné praxe z oblasti přístupnosti
Radek Pavlíček
 
Google and accessibility
Google and accessibilityGoogle and accessibility
Google and accessibility
Radek Pavlíček
 

More from Radek Pavlíček (20)

Digitální design bez bariér
Digitální design bez bariérDigitální design bez bariér
Digitální design bez bariér
 
Jak na přístupnost knihovních webů
Jak na přístupnost knihovních webůJak na přístupnost knihovních webů
Jak na přístupnost knihovních webů
 
Jak a proč řeší velké weby přístupnost
Jak a proč řeší velké weby přístupnostJak a proč řeší velké weby přístupnost
Jak a proč řeší velké weby přístupnost
 
Služby Střediska Teiresiás na konferenci INSPO 2017
Služby Střediska Teiresiás na konferenci INSPO 2017Služby Střediska Teiresiás na konferenci INSPO 2017
Služby Střediska Teiresiás na konferenci INSPO 2017
 
Proč zavést WAG 2.0 v Česlé republice
Proč zavést WAG 2.0 v Česlé republiceProč zavést WAG 2.0 v Česlé republice
Proč zavést WAG 2.0 v Česlé republice
 
Hodnocení přístupnosti v soutěži Zlatý erb 2014
Hodnocení přístupnosti v soutěži Zlatý erb 2014Hodnocení přístupnosti v soutěži Zlatý erb 2014
Hodnocení přístupnosti v soutěži Zlatý erb 2014
 
Když už Vyhláška o přístupnosti nestačí
Když už Vyhláška o přístupnosti nestačíKdyž už Vyhláška o přístupnosti nestačí
Když už Vyhláška o přístupnosti nestačí
 
How to improve UX by implementing accessibility - WebExpo 2013 Edition
How to improve UX by implementing accessibility - WebExpo 2013 EditionHow to improve UX by implementing accessibility - WebExpo 2013 Edition
How to improve UX by implementing accessibility - WebExpo 2013 Edition
 
Testování přístupnosti v soutěži Zlatý erb 2013
Testování přístupnosti v soutěži Zlatý erb 2013Testování přístupnosti v soutěži Zlatý erb 2013
Testování přístupnosti v soutěži Zlatý erb 2013
 
Nahradí WCAG 2.0 Vyhlášku o přístupnosti?
Nahradí WCAG 2.0 Vyhlášku o přístupnosti?Nahradí WCAG 2.0 Vyhlášku o přístupnosti?
Nahradí WCAG 2.0 Vyhlášku o přístupnosti?
 
Tvorba přístupných dokumentů v neziskových organizacích
Tvorba přístupných dokumentů v neziskových organizacíchTvorba přístupných dokumentů v neziskových organizacích
Tvorba přístupných dokumentů v neziskových organizacích
 
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of UniversitiesHow HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
 
Jak jsou na tom parádní weby s přístupností
Jak jsou na tom parádní weby s přístupnostíJak jsou na tom parádní weby s přístupností
Jak jsou na tom parádní weby s přístupností
 
How to ensure accessibility of documents, published at masaryk university
How to ensure accessibility of documents, published at masaryk universityHow to ensure accessibility of documents, published at masaryk university
How to ensure accessibility of documents, published at masaryk university
 
How to improve UX by implementing accessibility
How to improve UX by implementing accessibilityHow to improve UX by implementing accessibility
How to improve UX by implementing accessibility
 
Measuring real accessibility
Measuring real accessibilityMeasuring real accessibility
Measuring real accessibility
 
Myslete i na přístupnost. Mobilní aplikace pro nevidomé, mDevCamp 2012
Myslete i na přístupnost. Mobilní aplikace pro nevidomé, mDevCamp 2012Myslete i na přístupnost. Mobilní aplikace pro nevidomé, mDevCamp 2012
Myslete i na přístupnost. Mobilní aplikace pro nevidomé, mDevCamp 2012
 
Přístupné weby knihoven
Přístupné weby knihovenPřístupné weby knihoven
Přístupné weby knihoven
 
Příklady dobré a špatné praxe z oblasti přístupnosti
Příklady dobré a špatné praxe z oblasti přístupnostiPříklady dobré a špatné praxe z oblasti přístupnosti
Příklady dobré a špatné praxe z oblasti přístupnosti
 
Google and accessibility
Google and accessibilityGoogle and accessibility
Google and accessibility
 

Přístupnost HTML5 v kombinaci s WAI-ARIA