Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How HTML5 and WAI-ARIA CanImprove Virtual Space of Universities  Radek PAVLÍČEK, Teiresias Centre, Masaryk University, Brno
What is accessibility good          for?
Availability – usermust be able to get  on the web.
Controlability – user  must be able to operate the web.
Comprehensibility –user must understand      the web.
Orientation – user mustbe able to find the way   through the web.
Time – user mustbe able to fullfil his   or her task in reasonable time.
Accessibility is often perceived as a matter    of people with special needs only.
Accessibility brings benefits also to the elderly, geeks,             children and very clever men.
Remember  Accessible web isbeneficial to all users,not only to users with    impairement.
How can HTML5 with WAI-ARIA help to improve webaccessibility? Which issues could be solved by them?
History
Picture     Text            Link                             Simple formWeb pages were very simple and static in the past....
Present
But today, web is multimedia and interactive space and also        assistive technologies are more powerfull.
In the past, there were two states only: 1or 0. Is accessible, or isn‘t.
But now, accessibility is perceived as grey gradient, becausevery often it is not easy to say whether something is or is n...
What is HTML5?
Semantics      Markup       JS APIOffline applications      Drawing        etc.
How AT makeweb accessible to  their users
User with       assistive      technology                   A11y APIDOM                off screen                     model
What is WAI-ARIA?
“WAI-ARIA is a specification thatprovides a means ofdescribing roles, states, andproperties for customwidgets so that they...
WAI-ARIA was created to bridge the gap between richapplications and disabled users by introducingadditional metadata.
WAI ARIA screenshot
WAI-ARIA is a part of     HTML5.
WAI ARIA is simple markup  <div role=„navigation“>
Why WAI-ARIA?
Weaknesses in HTMLDynamic content updatesComplex web applications
WAI-ARIA does not fix all accessibilityissues
WAI-ARIA support
HTML5 Support       www.html5accessibility.com
What doesWAI-ARIA bring?
Keyboard navigation  Roles and States   „Live Regions“     Landmarks  and much more
Keyboard Navigation
HTML 4 focusable elements       were only:a, area, button, input, object,      select a textarea.
WAI-ARIA   A possibility to make„focusable“ each element.
How to test it
Live Regions
Screen Reader & Javascript - AJAX updates with WAI-ARIA Live Regions - video               http://youtu.be/jFB_zJE_pjY
Forms (Roles and States)
New atributes for <input>•   autocomplete     •   height and width•   autofocus        •   list•   form             •   mi...
ARIA and HTML5<label>Color: <select name=colorrequired aria-required="true"> <optionvalue="">Choose color<option>Red<optio...
HTML5<label>Color: <select name=colorrequired><option value="">Choose color<option>Red<option>Green<option>Blue</select></...
Regions,Landmarks,Structure
Headings
Landmarks
Demonstration of landmarks
„Standard“ solution <div id="menu"> <h5>Menu</h5> <ul> … </div>
WAI-ARIA improvement<div id=„menu“role=„navigation"><h5>Menu</h5><ul>…</div>
WAI-ARIA and HTML5<nav role="navigation"><h5>Menu</h5><ul>…</nav>
HTML5 only<nav><ul>…</nav>
Distinguishing of menus<div role=„navigation„ aria-label=„Mainmenu“><h5>Main menu</h5><ul> … </div><div role=„navigation„ ...
How ARIA landmark roles help screen reader users -video              http://youtu.be/IhWMou12_Vk
You can use Web Developer Toolbar…
…or Landmarks extension to check the         presence of roles.
You can only make yourcontent more accessible     by using ARIA
It works
When should not I use       ARIA?
When native HTML will get the job done
Text alternatives of pictures
<img src=„picture.jpg“alt=„Text alternative.“>
figure and figcaption <figure> <img src=”picture.jpg”> <figcaption>Meaningful description.</figcaption> </figure>
img and aria-describedby <img src=”pictures.jpg” aria- describedby=”desc1”> … <p id=”desc1”>Meaningful description.</p>
versatile solution <figure> <img src=”picture.jpg” alt=”Brief description.” aria-describedby=”desc1”> <figcaption>Image ti...
Where to get more  information?
Pro HTML5 Accessibility
Contact infopavlicek@teiresias.muni.cz        @radlicek
Photo credits•   http://www.flickr.com/photos/nationaalarchief/4025536029/•   http://www.flickr.com/photos/cornelluniversi...
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
Upcoming SlideShare
Loading in …5
×

How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities

7,752 views

Published on

Slides with comments from my workshop presentation at Universal Learning Design Conference 2013. My workshop was about accessibility, HTML5 and WAI-ARIA and their benefit to users with special needs. Some examples included ;-)

  • Be the first to comment

  • Be the first to like this

How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities

  1. 1. How HTML5 and WAI-ARIA CanImprove Virtual Space of Universities Radek PAVLÍČEK, Teiresias Centre, Masaryk University, Brno
  2. 2. What is accessibility good for?
  3. 3. Availability – usermust be able to get on the web.
  4. 4. Controlability – user must be able to operate the web.
  5. 5. Comprehensibility –user must understand the web.
  6. 6. Orientation – user mustbe able to find the way through the web.
  7. 7. Time – user mustbe able to fullfil his or her task in reasonable time.
  8. 8. Accessibility is often perceived as a matter of people with special needs only.
  9. 9. Accessibility brings benefits also to the elderly, geeks, children and very clever men.
  10. 10. Remember Accessible web isbeneficial to all users,not only to users with impairement.
  11. 11. How can HTML5 with WAI-ARIA help to improve webaccessibility? Which issues could be solved by them?
  12. 12. History
  13. 13. Picture Text Link Simple formWeb pages were very simple and static in the past. Alsoassistive technologies were not so powerful as nowadays.
  14. 14. Present
  15. 15. But today, web is multimedia and interactive space and also assistive technologies are more powerfull.
  16. 16. In the past, there were two states only: 1or 0. Is accessible, or isn‘t.
  17. 17. But now, accessibility is perceived as grey gradient, becausevery often it is not easy to say whether something is or is notaccessible. This much better describes reality.
  18. 18. What is HTML5?
  19. 19. Semantics Markup JS APIOffline applications Drawing etc.
  20. 20. How AT makeweb accessible to their users
  21. 21. User with assistive technology A11y APIDOM off screen model
  22. 22. What is WAI-ARIA?
  23. 23. “WAI-ARIA is a specification thatprovides a means ofdescribing roles, states, andproperties for customwidgets so that they arerecognisable and usable byassistive technology users.”Gez Lemon, Introduction to WAI-ARIA
  24. 24. WAI-ARIA was created to bridge the gap between richapplications and disabled users by introducingadditional metadata.
  25. 25. WAI ARIA screenshot
  26. 26. WAI-ARIA is a part of HTML5.
  27. 27. WAI ARIA is simple markup <div role=„navigation“>
  28. 28. Why WAI-ARIA?
  29. 29. Weaknesses in HTMLDynamic content updatesComplex web applications
  30. 30. WAI-ARIA does not fix all accessibilityissues
  31. 31. WAI-ARIA support
  32. 32. HTML5 Support www.html5accessibility.com
  33. 33. What doesWAI-ARIA bring?
  34. 34. Keyboard navigation Roles and States „Live Regions“ Landmarks and much more
  35. 35. Keyboard Navigation
  36. 36. HTML 4 focusable elements were only:a, area, button, input, object, select a textarea.
  37. 37. WAI-ARIA A possibility to make„focusable“ each element.
  38. 38. How to test it
  39. 39. Live Regions
  40. 40. Screen Reader & Javascript - AJAX updates with WAI-ARIA Live Regions - video http://youtu.be/jFB_zJE_pjY
  41. 41. Forms (Roles and States)
  42. 42. New atributes for <input>• autocomplete • height and width• autofocus • list• form • min and max• formaction • multiple• formenctype • pattern (regexp)• Formmethod • placeholder• formnovalidate • required• formtarget • step
  43. 43. ARIA and HTML5<label>Color: <select name=colorrequired aria-required="true"> <optionvalue="">Choose color<option>Red<option>Green<option>Blue</select></label>
  44. 44. HTML5<label>Color: <select name=colorrequired><option value="">Choose color<option>Red<option>Green<option>Blue</select></label>
  45. 45. Regions,Landmarks,Structure
  46. 46. Headings
  47. 47. Landmarks
  48. 48. Demonstration of landmarks
  49. 49. „Standard“ solution <div id="menu"> <h5>Menu</h5> <ul> … </div>
  50. 50. WAI-ARIA improvement<div id=„menu“role=„navigation"><h5>Menu</h5><ul>…</div>
  51. 51. WAI-ARIA and HTML5<nav role="navigation"><h5>Menu</h5><ul>…</nav>
  52. 52. HTML5 only<nav><ul>…</nav>
  53. 53. Distinguishing of menus<div role=„navigation„ aria-label=„Mainmenu“><h5>Main menu</h5><ul> … </div><div role=„navigation„ aria-label=„SectionMenu“><h5>Section menu</h5><ul>… </div>
  54. 54. How ARIA landmark roles help screen reader users -video http://youtu.be/IhWMou12_Vk
  55. 55. You can use Web Developer Toolbar…
  56. 56. …or Landmarks extension to check the presence of roles.
  57. 57. You can only make yourcontent more accessible by using ARIA
  58. 58. It works
  59. 59. When should not I use ARIA?
  60. 60. When native HTML will get the job done
  61. 61. Text alternatives of pictures
  62. 62. <img src=„picture.jpg“alt=„Text alternative.“>
  63. 63. figure and figcaption <figure> <img src=”picture.jpg”> <figcaption>Meaningful description.</figcaption> </figure>
  64. 64. img and aria-describedby <img src=”pictures.jpg” aria- describedby=”desc1”> … <p id=”desc1”>Meaningful description.</p>
  65. 65. versatile solution <figure> <img src=”picture.jpg” alt=”Brief description.” aria-describedby=”desc1”> <figcaption>Image title</figcaption> </figure> … <p id=”desc1”>More detailed description.</p>
  66. 66. Where to get more information?
  67. 67. Pro HTML5 Accessibility
  68. 68. Contact infopavlicek@teiresias.muni.cz @radlicek
  69. 69. 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

×