Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

6,003

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. …

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 ;-)

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
6,003
On Slideshare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×