Přístupnost HTML5 v kombinaci         s WAI-ARIA          Radek PAVLÍČEK
Jak může HTML5 s WAI-ARIA pomoci zlepšitpří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.
SrozumitelnostPrezentovaný obsahmusí být srozumitelnýpro uživatele.
OrientaceUživatel se musí býtschopen dostattam, kam potřebuje.
ČasToto všechno musí býtschopen udělatv rozumném čase.
Přístupnost pomáhá lidem s nejrůznějším zdravotnímpostižením: lidem nevidomým, slabozrakým, tělesně čisluchově postiženým,...
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           ...
Web je multimediální prostor, v němž můžeme narazit na jakýkoliv typobsahu. Asistivní technologie nabízí svým uživatelům s...
V přístupnosti už dávno nerozlišujeme pouze dva stavy – je anení 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í...
Co je HTML5?
Sémantika         Markup          JS APIOffline 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 APIDOM                  off screen                   ...
Co je WAI-ARIA?
“WAI-ARIA is a specification thatprovides a means ofdescribing roles, states, andproperties for customwidgets so that they...
WAI-ARIA je dnessoučá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 HTMLDynamické změny obsahuRozsáhlé webové aplikace
WAI-ARIA neřeší všeJsou situace, kdy WAI-ARIA nepomůže. Ale to není důvod jinepoužívat, protože pokud ji na svém webu použ...
Podpora WAI-ARIAWAI-ARIA má dnes širokou podporu na straně prohlížečů, asistivníchtechnologií i některých Javascriptových ...
Podpora HTML5      www.html5accessibility.com
Co přinášíWAI-ARIA?
Navigaci z klávesnice    Role a stavy   „Živé oblasti“  Oblasti stránkya spoustu dalších věcí
Navigace z klávesnice
V HTML 4 mohly získatfocus z klávesnice pouzea, area, button, input, obj   ect, select a textarea.
WAI-ARIAMožnost přiřadit tabindex  jakémukoliv prvku.
Jak si to otestovat?
Živé oblasti
Asistivní technologie neumí upozornit uživatele na dynamické změnyobsahu na stránce. I toto ale lze jednoduše ošetřit pomo...
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             •   mi...
WAI-ARIA a HTML5<label>Barva: <select name=colorrequired aria-required="true"> <optionvalue="">Vyberte barvu<option>Červen...
HTML5<label>Barva: <select name=colorrequired><option value="">Vyberte barvu<option>Červená<option>Zelená<option>Modrá</se...
Oblasti stránky, strukturování
NadpisyJako hlavní nástroj pro strukturování stránek se dnes stále používajínadpisy – ať už ty viditelné, nebo vhodně skry...
Nevýhodou tohoto řešení je to, že nadpisem jsme schopni vyznačitpouze začátek konkrétní oblasti, ale už ne její konec.
Osnova stránky, vytvořená z jednotlivých nadpisů, tedy může vypadatnapříklad takto.
To, jak bude osnova stránky vypadat, si můžeme ověřit napříkladpomocí 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„...
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 WebDeveloper Toolbar.
Nebo rozšíření Landmarks.
Zapamatujte si
Už dnes      lze používat    oblasti stránkya 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 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/cornelluniversi...
Přístupnost HTML5 v kombinaci s WAI-ARIA
Přístupnost HTML5 v kombinaci s WAI-ARIA
Přístupnost HTML5 v kombinaci s WAI-ARIA
Přístupnost HTML5 v kombinaci s WAI-ARIA
Přístupnost HTML5 v kombinaci s WAI-ARIA
Přístupnost HTML5 v kombinaci s WAI-ARIA
Upcoming SlideShare
Loading in …5
×

Přístupnost HTML5 v kombinaci s WAI-ARIA

3,414 views

Published on

Lehký úvod do přístupnosti HTML5 a WAI-ARIA. Přístupnost v současnosti stojí na pěti základních kamenech - dostupnosti, ovladatelnosti, srozumitelnosti, zorientování se a času.

Web je dnes multimediální prostor a na tuto situaci musí asistivní technologie reagovat. HTML5 a WAI-ARIA přináší celou řadu technik, jak lépe tvořit web tak, aby byl přístupný opravdu pro každého.

To, jak ošetřit dynamické změny obsahu, lépe strukturovat stránky či zlepšit přístupnost formulářů, se dozvíte v této prezentaci.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,414
On SlideShare
0
From Embeds
0
Number of Embeds
1,339
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Přístupnost HTML5 v kombinaci s WAI-ARIA

  1. 1. Přístupnost HTML5 v kombinaci s WAI-ARIA Radek PAVLÍČEK
  2. 2. Jak může HTML5 s WAI-ARIA pomoci zlepšitpřístupnost webu? Jaké problémy řeší?
  3. 3. Přístupnost
  4. 4. Dostupnost Uživatel se musí být schopen k informacím dostat.
  5. 5. Ovladatelnost Pokud se uživatel na web dostane, musí být schopen jej ovládat.
  6. 6. SrozumitelnostPrezentovaný obsahmusí být srozumitelnýpro uživatele.
  7. 7. OrientaceUživatel se musí býtschopen dostattam, kam potřebuje.
  8. 8. ČasToto všechno musí býtschopen udělatv rozumném čase.
  9. 9. Přístupnost pomáhá lidem s nejrůznějším zdravotnímpostižením: lidem nevidomým, slabozrakým, tělesně čisluchově postiženým, lidem s kognitivními poruchami čiporuchami učení.
  10. 10. Přístupnost není jen pro handicapované
  11. 11. Pro přístup k webu slouží uživatelům nejrůznějšítechologie či zařízení.
  12. 12. Například notebook se screen readerem a softwarovou lupou.
  13. 13. Hmatový displej (braillský řádek).
  14. 14. Stolní počítač se softwarovou lupou.
  15. 15. VÝZNAM POMŮCEK PRO ZAČLENĚNÍ DO SPOLEČNOSTIČi ozvučený mobilní telefon.
  16. 16. 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ě.
  17. 17. Web je multimediální prostor, v němž můžeme narazit na jakýkoliv typobsahu. Asistivní technologie nabízí svým uživatelům spoustu funkcí.
  18. 18. V přístupnosti už dávno nerozlišujeme pouze dva stavy – je anení přístupný.
  19. 19. 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ž jednamožnost řešení daného problému.
  20. 20. Co je HTML5?
  21. 21. Sémantika Markup JS APIOffline fungování aplikací Kreslení v prohlížeči atd.
  22. 22. Jak AT zpřístupňuje uživateli webovou stránku
  23. 23. Uživatel s asistivní technologií A11y APIDOM off screen model
  24. 24. Co je WAI-ARIA?
  25. 25. “WAI-ARIA is a specification thatprovides a means ofdescribing roles, states, andproperties for customwidgets so that they are recognisableand usable byassistive technology users.”Gez Lemon, Introduction to WAI-ARIA
  26. 26. WAI-ARIA je dnessoučástí HTML5.
  27. 27. WAI-ARIA přemosťuje nedostatky v přístupnosti vzniklé skriptovánímči takové, nelze řešit pouze pomocí HTML.
  28. 28. Proč WAI-ARIA?
  29. 29. Slabá místa v HTMLDynamické změny obsahuRozsáhlé webové aplikace
  30. 30. WAI-ARIA neřeší všeJsou situace, kdy WAI-ARIA nepomůže. Ale to není důvod jinepoužívat, protože pokud ji na svém webu použijete, tak tím chybuneuděláte a vaši uživatelé mohou z WAI-ARIA jen získat.
  31. 31. Podpora WAI-ARIAWAI-ARIA má dnes širokou podporu na straně prohlížečů, asistivníchtechnologií i některých Javascriptových knihoven.
  32. 32. Podpora HTML5 www.html5accessibility.com
  33. 33. Co přinášíWAI-ARIA?
  34. 34. Navigaci z klávesnice Role a stavy „Živé oblasti“ Oblasti stránkya spoustu dalších věcí
  35. 35. Navigace z klávesnice
  36. 36. V HTML 4 mohly získatfocus z klávesnice pouzea, area, button, input, obj ect, select a textarea.
  37. 37. WAI-ARIAMožnost přiřadit tabindex jakémukoliv prvku.
  38. 38. Jak si to otestovat?
  39. 39. Živé oblasti
  40. 40. Asistivní technologie neumí upozornit uživatele na dynamické změnyobsahu na stránce. I toto ale lze jednoduše ošetřit pomocí WAI-ARIA.
  41. 41. Screen Reader & Javascript - AJAX updates with WAI-ARIA Live Regions - video http://youtu.be/jFB_zJE_pjY
  42. 42. Formuláře (role a stavy)
  43. 43. 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
  44. 44. WAI-ARIA a HTML5<label>Barva: <select name=colorrequired aria-required="true"> <optionvalue="">Vyberte barvu<option>Červená<option>Zelená<option>Modrá</select></label>
  45. 45. HTML5<label>Barva: <select name=colorrequired><option value="">Vyberte barvu<option>Červená<option>Zelená<option>Modrá</select></label>
  46. 46. Oblasti stránky, strukturování
  47. 47. NadpisyJako 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 dnesnepsaným standardem.
  48. 48. Nevýhodou tohoto řešení je to, že nadpisem jsme schopni vyznačitpouze začátek konkrétní oblasti, ale už ne její konec.
  49. 49. Osnova stránky, vytvořená z jednotlivých nadpisů, tedy může vypadatnapříklad takto.
  50. 50. To, jak bude osnova stránky vypadat, si můžeme ověřit napříkladpomocí plug-inu Web Developer Toolbar pro Mozilla Firefox.
  51. 51. Stejně dobře nám ve stejném prohlížeči poslouží rozšířeníHeadingsMap.
  52. 52. Mohu strukturování nějak zlepšit?
  53. 53. Řešením jsou oblasti stránky (landmarks) ze specifikace WAI-ARIA.
  54. 54. Dnes nejpoužívanější řešení<div id="menu"><h5>Menu</h5><ul>…</div>
  55. 55. Vylepšení přes WAI-ARIA<div id=„menu“role=„navigation"><h5>Menu</h5><ul>…</div>
  56. 56. WAI-ARIA a HTML5<nav role="navigation"><h5>Menu</h5><ul>…</nav>
  57. 57. Jen HTML5<nav><ul>…</nav>
  58. 58. Jak odlišit dvě menu<div role=„navigation„ aria-label=„Hlavnímenu“><h5>Hlavní menu</h5><ul> … </div><div role=„navigation„ aria-label=„Menusekce“><h5>Menu sekce</h5><ul>… </div>
  59. 59. How ARIA landmark roles help screen reader usersvideo ukázka http://youtu.be/IhWMou12_Vk
  60. 60. Pro zobrazení jednotlivých rolí prvků na stránce mohu opět použít WebDeveloper Toolbar.
  61. 61. Nebo rozšíření Landmarks.
  62. 62. Zapamatujte si
  63. 63. Už dnes lze používat oblasti stránkya další techniky z ARIA.
  64. 64. Funguje to
  65. 65. Kde lze použít standardníHTML prvky, použijte je.
  66. 66. Kdy WAI-ARIA nepoužít?Když stejně dobře poslouží „starédobré“ HTML.
  67. 67. Dívejme se dopředu…
  68. 68. …ale buďme nohama na zemi. Zpětná kompatibilita je důležitá.
  69. 69. Jak vám může pomoci projektBlind Friendly Web
  70. 70. Osvěta
  71. 71. Školení
  72. 72. Testování
  73. 73. Rady, tipy, know-how
  74. 74. V současnosti nejlepší kniha o přístupnosti HTML5. Dalšíinformace najdete i v mých článcích na www.zdrojak.cz.
  75. 75. Kontaktní informace pavlicek@blindfriendly.cz @radlicek
  76. 76. 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

×