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

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

24. What is WAI-ARIA?

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.

27. WAI ARIA screenshot

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

35. What does
WAI-ARIA bring?

36. Keyboard navigation
Roles and States
„Live Regions“
Landmarks
and much more

37. Keyboard Navigation

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>

48. Regions,
Landmarks,
Structure

49. Headings

55. Landmarks

56. Demonstration of landmarks

57. „Standard“ solution
<div id="menu">
<h5>Menu</h5>
<ul>
…
</div>

58. WAI-ARIA improvement
<div id=„menu“
role=„navigation">
<h5>Menu</h5>
<ul>
…
</div>

59. WAI-ARIA and HTML5
<nav role="navigation">
<h5>Menu</h5>
<ul>
…
</nav>

60. HTML5 only
<nav>
<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

70. <img src=„picture.jpg“
alt=„Text alternative.“>

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?

75. Pro HTML5 Accessibility

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