What HTML5 Means for Web Accessibility

Does HTML5 improve website accessibility or make it worse? How have screen readers adapted to the new technologies? Does HTML5 remove the need for WAI-ARIA or the need for accessibility testing all together?

Full slides and resources here:
https://github.com/klamping/html5tx-a11y

Transcript

1. What HTML5 Means for Web Accessibility Kevin Lamping All logos, trade marks and brand names used belong to the respective owners
2. @klamping
3. My Start
5. A Favor
6. ?.com
7. Just Imagine
8. WCAG 2.0
9. Your Job
10. Acce$$ibility
11. Good News Bad News
12. Accessibility is easy
13. HTML is mostly accessible
14. ✓ Alt Text ✓ Labels ✓ Semantics
15. Let’s skip that and talk HTML5!
16. Accessibility is hard...
17. for non-trivial stuff
18. Even simple non-trivial stuff
19. WCAG 2.0
20. Support
21. Accessibility is Frustrating
22. We forget about it We make excuses
23. We all need forgiveness
24. Bless me father, for I have sinned
25. It has been days since I last used a screen reader
26. I am sorry for this and all the sins of my past life, especially for .
27. Amen
28. What’s the point?
29. You have a choice
30. They don’t
31. We’re Zuul
32. Accessibility is good for you
33. Accessibility Usability
35. “For my 1 year old daughter a magazine is an iPad that doesn’t work” - YouTube Video
37. “...people aren’t talking about how he made his [tech] accessible”
38. “a 15-year-old kid can be playing with Garage Band and come up with unbelievable ideas”
39. “He has leveled the playing field.”
40. “His company made it accessible without screaming, ‘This is for the blind, this is for the deaf’”
41. “I’m just hoping his life [will] challenge those to do what he has done”
42. “you just make it one of your apps. That will create a world accessible to anyone”
43. “Thanks” - Stevie W onder
44. All you need is love
45. What does HTML5 mean for web accessibility?
46. article, aside, footer, header, nav, section
47. <header>
48. <header> == <div>
49. <header> == <section>
50. <header> == <header>
51. <header> == <div>
52. == <header> <header>
53. html5accessibility . com
54. <footer> Unsupported Supported
55. Unsupported Supported <footer>
56. What does “supported” really mean? Disclaimer
57. Listens to Talks to
58. and here Support needed here Listens to Talks to
59. Users are here 2008 2009 2010 2011 2012 2013
60. Users are here 2008 2009 2010 2011 2012 2013 Support is
61. Is there any hope?
62. Belt Suspenders 㽊
63. article, aside, footer, header, nav, section
64. It ain’t over till the fat lady sings an ARIA
65. ARIA <span role="xyz">
66. <header role="banner">
67. <footer role="contentinfo">
68. <nav role="navigation">
69. <aside role="complementary">
70. <article role="article">
71. <section role="???">
72. <main role="main">
73. Can you improve?
74. <audio> <video>
75. Keyboard Support It’s not just for Screen Readers
77. <audio src="a.ogg" type="audio/ogg"> <video src="v .ogg" type="video/ogg">
78. Chrome Audio Controls Firefox Video Controls
79. <button class="audio-play"> Custom Audio Controls
80. <track kind="subtitles" srclang="en" src="track.vtt" />
81. <video src="v .ogv"> <track...></track> </video>
84. <figure> <figcaption>
86. <figure> <img src="edan.jpg"> <figcaption>My Son... </figcaption> </figure>
87. <figure role="group"> <img src="edan.jpg" aria-labelledby="c"> <figcaption id="c"> </figcaption> </figure>
88. <figure role="group"> <img src="edan.jpg" alt="photo 1"> <figcaption>My Son... (photo 1).</figcaption> </figure>
89. <canvas> it’s complicated
90. <canvas> <h2>Shapes</h2> <p>A circle and <a ...>box</a>. </p> </canvas>
91. http://is.gd/ OTCv0x
92. Support
95. Two things about Mobile Accessibility
96. Test for it.
97. Use HTML5 elements They’re natively supported
98. Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
99. != != !=
100. Does HTML5 improve web accessibility or make it worse?
101. It’s kinda both
102. How have screen readers adapted?
103. It’s getting better all the time
104. Does HTML5 remove the need for accessibility testing?
105. No. Not at all. Test your stuff
106. The only constant is change
108. Credits http://www.flickr.com/photos/oakleyoriginals/ 7944244598/ http://www.flickr.com/photos/seandreilinger/ 2137302514/ http://www.iconarchive.com/show/scrap-icons- by-deleket/Magnifying-Glass-2-icon.html http://www.clarissapeterson.com/2012/11/ html5-accessibility
109. github.com/ klamping/ html5tx-a11y @klamping