Successfully reported this slideshow.

What HTML5 Means for Web Accessibility

396 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

What HTML5 Means for Web Accessibility

  1. 1. What HTML5Means for WebAccessibilityKevin Lamping All logos, trade marks and brand names used belong to the respective owners
  2. 2. @klamping
  3. 3. My Start
  4. 4. 2007
  5. 5. A Favor
  6. 6. ?.com
  7. 7. Just Imagine
  8. 8. WCAG 2.0
  9. 9. Your Job
  10. 10. Acce$$ibility
  11. 11. Good NewsBad News
  12. 12. Accessibility is easy
  13. 13. HTMLis mostlyaccessible
  14. 14. ✓ Alt Text✓ Labels✓ Semantics
  15. 15. Let’s skipthat andtalk HTML5!
  16. 16. Accessibility is hard...
  17. 17. for non-trivial stuff
  18. 18. Even simple non-trivial stuff
  19. 19. WCAG 2.0
  20. 20. Support
  21. 21. Accessibilityis Frustrating
  22. 22. We forgetabout it We make excuses
  23. 23. We all needforgiveness
  24. 24. Bless mefather, for Ihave sinned
  25. 25. It has been days sinceI last used ascreen reader
  26. 26. I am sorry for thisand all the sins ofmy past life,especially for .
  27. 27. Amen
  28. 28. What’s the point?
  29. 29. You have a choice
  30. 30. They don’t
  31. 31. We’re Zuul
  32. 32. Accessibility is good for you
  33. 33. Accessibility Usability
  34. 34. “For my 1 year olddaughter a magazine is aniPad that doesn’t work” - YouTube Video
  35. 35. “...people aren’ttalking abouthow he made his[tech] accessible”
  36. 36. “a 15-year-old kidcan be playingwith Garage Bandand come up withunbelievable ideas”
  37. 37. “He has leveledthe playing field.”
  38. 38. “His companymade it accessiblewithout screaming,‘This is for theblind, this is forthe deaf’”
  39. 39. “I’m just hopinghis life [will]challenge those todo what he hasdone”
  40. 40. “you just make itone of your apps.That will create aworld accessible toanyone”
  41. 41. “Thanks” - Stevie Wonder
  42. 42. All youneed is love
  43. 43. What doesHTML5mean for webaccessibility?
  44. 44. article, aside,footer, header, nav, section
  45. 45. <header>
  46. 46. <header> == <div>
  47. 47. <header> == <section>
  48. 48. <header> == <header>
  49. 49. <header> == <div>
  50. 50. <header> == <header>
  51. 51. html5accessibility. com
  52. 52. <footer>Unsupported Supported
  53. 53. <footer>Unsupported Supported
  54. 54. DisclaimerWhat does“supported”really mean?
  55. 55. Talks to Listens to
  56. 56. Supportneeded here and here Talks to Listens to
  57. 57. Users are here2008 2009 2010 2011 2012 2013
  58. 58. Support isUsers are here2008 2009 2010 2011 2012 2013
  59. 59. Is there any hope?
  60. 60. SuspendersBelt
  61. 61. article, aside,footer, header, nav, section
  62. 62. It ain’t over tillthe fat ladysings an ARIA
  63. 63. ARIA<span role="xyz">
  64. 64. <header role="banner">
  65. 65. <footer role="contentinfo">
  66. 66. <nav role="navigation">
  67. 67. <asiderole="complementary">
  68. 68. <article role="article">
  69. 69. <section role="???">
  70. 70. <main role="main">
  71. 71. Can youimprove?
  72. 72. <audio><video>
  73. 73. Keyboard SupportIt’s not just forScreen Readers
  74. 74. <audio src="a.ogg" type="audio/ogg"><video src="v.ogg" type="video/ogg">
  75. 75. Chrome Audio ControlsFirefox Video Controls
  76. 76. Custom Audio Controls<button class="audio-play">
  77. 77. <track kind="subtitles" srclang="en" src="track.vtt" />
  78. 78. <video src="v.ogv"> <track...></track></video>
  79. 79. <figure><figcaption>
  80. 80. <figure> <img src="edan.jpg"> <figcaption>My Son... </figcaption></figure>
  81. 81. <figure role="group"> <img src="edan.jpg" aria-labelledby="c"> <figcaption id="c"> </figcaption></figure>
  82. 82. <figure role="group"> <img src="edan.jpg" alt="photo 1"> <figcaption>My Son...(photo 1).</figcaption></figure>
  83. 83. <canvas>it’s complicated
  84. 84. <canvas> <h2>Shapes</h2> <p>A circle and <a ...>box</a>. </p></canvas>
  85. 85. http://is.gd/ OTCv0x
  86. 86. Support
  87. 87. Two thingsaboutMobileAccessibility
  88. 88. Test for it.
  89. 89. Use HTML5elementsThey’re nativelysupported
  90. 90. Test Test Test TestTest Test Test TestTest Test Test TestTest Test Test TestTest Test Test TestTest Test Test Test
  91. 91. != != !=
  92. 92. Does HTML5improve webaccessibility ormake it worse?
  93. 93. It’s kinda both
  94. 94. How havescreen readersadapted?
  95. 95. It’s getting better all the time
  96. 96. Does HTML5remove theneed foraccessibilitytesting?
  97. 97. No. Not at all.Test your stuff
  98. 98. The onlyconstant ischange
  99. 99. Creditshttp://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.htmlhttp://www.clarissapeterson.com/2012/11/html5-accessibility
  100. 100. github.com/klamping/html5tx-a11y@klamping

×