What HTML5 Means for Web Accessibility

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

6823d6d1ee14bd068007bd60ddb6a41a?s=128

Kevin Lamping

February 02, 2013
Tweet

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

  4. 2007

  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

  34. None
  35. “For my 1 year old daughter a magazine is an

    iPad that doesn’t work” - YouTube Video
  36. None
  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

  76. None
  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>

  82. None
  83. None
  84. <figure> <figcaption>

  85. None
  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

  93. None
  94. None
  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

  107. None
  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