Successfully reported this slideshow.

Přístupnost HTML5 v kombinaci s WAI-ARIA

0

Share

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

YouTube videos are no longer supported on SlideShare

View original on YouTube

YouTube videos are no longer supported on SlideShare

View original on YouTube

Loading in …3
×
1 of 84
1 of 84

Přístupnost HTML5 v kombinaci s WAI-ARIA

0

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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šit pří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. Srozumitelnost Prezentovaný obsah musí být srozumitelný pro uživatele.
  7. 7. Orientace Uživatel se musí být schopen dostat tam, kam potřebuje.
  8. 8. Čas Toto všechno musí být schopen udělat v rozumném čase.
  9. 9. 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í.
  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 typ obsahu. 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 a není 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ž jedna možnost řešení daného problému.
  20. 20. Co je HTML5?
  21. 21. Sémantika Markup JS API Offline 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 API DOM off screen model
  24. 24. Co je WAI-ARIA?
  25. 25. “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
  26. 26. WAI-ARIA je dnes součá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 HTML Dynamické změny obsahu Rozsáhlé webové aplikace
  30. 30. 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.
  31. 31. Podpora WAI-ARIA WAI-ARIA má dnes širokou podporu na straně prohlížečů, asistivních technologií 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ánky a spoustu dalších věcí
  35. 35. Navigace z klávesnice
  36. 36. V HTML 4 mohly získat focus z klávesnice pouze a, area, button, input, obj ect, select a textarea.
  37. 37. WAI-ARIA Mož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ěny obsahu 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=color required aria-required="true"> <option value="">Vyberte barvu <option>Červená <option>Zelená <option>Modrá </select> </label>
  45. 45. HTML5 <label>Barva: <select name=color required> <option value="">Vyberte barvu <option>Červená <option>Zelená <option>Modrá </select> </label>
  46. 46. Oblasti stránky, strukturování
  47. 47. 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.
  48. 48. Nevýhodou tohoto řešení je to, že nadpisem jsme schopni vyznačit pouze začátek konkrétní oblasti, ale už ne její konec.
  49. 49. Osnova stránky, vytvořená z jednotlivých nadpisů, tedy může vypadat například takto.
  50. 50. To, jak bude osnova stránky vypadat, si můžeme ověřit například pomocí 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=„Menu sekce“> <h5>Menu sekce</h5> <ul>… </div>
  59. 59. How ARIA landmark roles help screen reader users video ukázka http://youtu.be/IhWMou12_Vk
  60. 60. Pro zobrazení jednotlivých rolí prvků na stránce mohu opět použít Web Developer Toolbar.
  61. 61. Nebo rozšíření Landmarks.
  62. 62. Zapamatujte si
  63. 63. Už dnes lze používat oblasti stránky a 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 projekt Blind 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

×