How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
Download as PPTX, PDF0 likes8,482 views
The document discusses how HTML5 and WAI-ARIA can enhance web accessibility for university virtual spaces, emphasizing that accessibility benefits all users, not just those with impairments. It explains the functionalities of WAI-ARIA, including improvements in navigation, roles, and live regions, while highlighting the importance of using both HTML5 and WAI-ARIA together for optimal accessibility. Additionally, the document provides examples of how to implement these technologies effectively in web development.
How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities
- 1. How HTML5 and WAI-ARIA Can Improve Virtual Space of Universities Radek PAVLÍČEK, Teiresias Centre, Masaryk University, Brno
- 2. What is accessibility good for?
- 3. Availability – user must be able to get on the web.
- 4. Controlability – user must be able to operate the web.
- 5. Comprehensibility – user must understand the web.
- 6. Orientation – user must be able to find the way through the web.
- 7. Time – user must be able to fullfil his or her task in reasonable time.
- 9. Accessibility is often perceived as a matter of people with special needs only.
- 10. Accessibility brings benefits also to the elderly, geeks, children and very clever men.
- 11. Remember Accessible web is beneficial to all users, not only to users with impairement.
- 12. How can HTML5 with WAI-ARIA help to improve web accessibility? Which issues could be solved by them?
- 13. History
- 14. Picture Text Link Simple form Web pages were very simple and static in the past. Also assistive technologies were not so powerful as nowadays.
- 15. Present
- 16. But today, web is multimedia and interactive space and also assistive technologies are more powerfull.
- 18. In the past, there were two states only: 1 or 0. Is accessible, or isn‘t.
- 19. But now, accessibility is perceived as grey gradient, because very often it is not easy to say whether something is or is not accessible. This much better describes reality.
- 20. What is HTML5?
- 21. Semantics Markup JS API Offline applications Drawing etc.
- 22. How AT make web accessible to their users
- 23. User with assistive technology A11y API DOM off screen model
- 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. WAI-ARIA was created to bridge the gap between rich applications and disabled users by introducing additional metadata.
- 28. WAI-ARIA is a part of HTML5.
- 29. WAI ARIA is simple markup <div role=„navigation“>
- 30. Why WAI-ARIA?
- 31. Weaknesses in HTML Dynamic content updates Complex web applications
- 32. WAI-ARIA does not fix all accessibility issues
- 33. WAI-ARIA support
- 34. HTML5 Support www.html5accessibility.com
- 36. Keyboard navigation Roles and States „Live Regions“ Landmarks and much more
- 38. HTML 4 focusable elements were only: a, area, button, input, object, select a textarea.
- 39. WAI-ARIA A possibility to make „focusable“ each element.
- 40. How to test it
- 42. Live Regions
- 43. Screen Reader & Javascript - AJAX updates with WAI- ARIA Live Regions - video http://youtu.be/jFB_zJE_pjY
- 44. Forms (Roles and States)
- 45. 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
- 46. ARIA and HTML5 <label>Color: <select name=color required aria-required="true"> <option value="">Choose color <option>Red <option>Green <option>Blue </select> </label>
- 47. HTML5 <label>Color: <select name=color required> <option value="">Choose color <option>Red <option>Green <option>Blue </select> </label>
- 49. Headings
- 55. Landmarks
- 57. „Standard“ solution <div id="menu"> <h5>Menu</h5> <ul> … </div>
- 59. WAI-ARIA and HTML5 <nav role="navigation"> <h5>Menu</h5> <ul> … </nav>
- 61. Distinguishing of menus <div role=„navigation„ aria-label=„Main menu“> <h5>Main menu</h5> <ul> … </div> <div role=„navigation„ aria-label=„Section Menu“> <h5>Section menu</h5> <ul>… </div>
- 62. How ARIA landmark roles help screen reader users - video http://youtu.be/IhWMou12_Vk
- 63. You can use Web Developer Toolbar…
- 64. …or Landmarks extension to check the presence of roles.
- 65. You can only make your content more accessible by using ARIA
- 66. It works
- 67. When should not I use ARIA?
- 68. When native HTML will get the job done
- 69. Text alternatives of pictures
- 71. figure and figcaption <figure> <img src=”picture.jpg”> <figcaption>Meaningful description.</figcaption> </figure>
- 72. img and aria-describedby <img src=”pictures.jpg” aria- describedby=”desc1”> … <p id=”desc1”>Meaningful description.</p>
- 73. 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>
- 74. Where to get more information?
- 76. Contact info pavlicek@teiresias.muni.cz @radlicek
- 77. 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