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
   

   View Slide

2. @klamping
   

   View Slide

3. My Start
   

   View Slide

4. View Slide

5. A Favor
   

   View Slide

6. ?.com
   

   View Slide

7. Just Imagine
   

   View Slide

8. WCAG 2.0
   

   View Slide

9. Your Job
   

   View Slide

10. Acce$$ibility
    

    View Slide

11. Good News
    Bad News
    

    View Slide

12. Accessibility
    is easy
    

    View Slide

13. HTML
    is mostly
    accessible
    

    View Slide

14. ✓ Alt Text
    ✓ Labels
    ✓ Semantics
    

    View Slide

15. Let’s skip
    that and
    talk HTML5!
    

    View Slide

16. Accessibility
    is hard...
    

    View Slide

17. for
    non-trivial
    stuff
    

    View Slide

18. Even simple
    non-trivial
    stuff
    

    View Slide

19. WCAG 2.0
    

    View Slide

20. Support
    

    View Slide

21. Accessibility
    is Frustrating
    

    View Slide

22. We forget
    about it
    We make
    excuses
    

    View Slide

23. We all need
    forgiveness
    

    View Slide

24. Bless me
    father, for I
    have sinned
    

    View Slide

25. It has been
    days since
    I last used a
    screen reader
    

    View Slide

26. I am sorry for this
    and all the sins of
    my past life,
    especially for
    .
    

    View Slide

27. Amen
    

    View Slide

28. What’s the
    point?
    

    View Slide

29. You have a
    choice
    

    View Slide

30. They don’t
    

    View Slide

31. We’re Zuul
    

    View Slide

32. Accessibility
    is good for
    you
    

    View Slide

33. Accessibility
    Usability
    

    View Slide

34. View Slide

35. “For my 1 year old
    daughter a magazine is an
    iPad that doesn’t work”
    - YouTube Video
    

    View Slide

36. View Slide

37. “...people aren’t
    talking about
    how he made his
    [tech] accessible”
    

    View Slide

38. “a 15-year-old kid
    can be playing
    with Garage Band
    and come up with
    unbelievable ideas”
    

    View Slide

39. “He has leveled
    the playing field.”
    

    View Slide

40. “His company
    made it accessible
    without screaming,
    ‘This is for the
    blind, this is for
    the deaf’”
    

    View Slide

41. “I’m just hoping
    his life [will]
    challenge those to
    do what he has
    done”
    

    View Slide

42. “you just make it
    one of your apps.
    That will create a
    world accessible to
    anyone”
    

    View Slide

43. “Thanks”
    - Stevie W
    onder
    

    View Slide

44. All you
    need is love
    

    View Slide

45. What does
    HTML5
    mean for web
    accessibility?
    

    View Slide

46. article, aside,
    footer, header,
    nav, section
    

    View Slide

47. 
    

    View Slide

48. 
    ==
    

    View Slide

49. 
    ==
    

    View Slide

50. 
    ==
    

    View Slide

51. 
    ==
    

    View Slide

52. ==
    
    

    View Slide

53. html5accessibility
    .
    com
    

    View Slide

54. 
    Unsupported
    Supported
    

    View Slide

55. Unsupported
    Supported
    
    

    View Slide

56. What does
    “supported”
    really mean?
    Disclaimer
    

    View Slide

57. Listens to
    Talks to
    

    View Slide

58. and here
    Support
    needed here
    Listens to
    Talks to
    

    View Slide

59. Users are here
    2008 2009 2010 2011 2012 2013
    

    View Slide

60. Users are here
    2008 2009 2010 2011 2012 2013
    Support is
    

    View Slide

61. Is there any
    hope?
    

    View Slide

62. Belt
    Suspenders
    㽊
    

    View Slide

63. article, aside,
    footer, header,
    nav, section
    

    View Slide

64. It ain’t over till
    the fat lady
    sings an ARIA
    

    View Slide

65. ARIA
    
    

    View Slide

66. role="banner">
    

    View Slide

67. role="contentinfo">
    

    View Slide

68. role="navigation">
    

    View Slide

69. role="complementary">
    

    View Slide

70. role="article">
    

    View Slide

71. 
    

    View Slide

72. 
    

    View Slide

73. Can you
    improve?
    

    View Slide

74. 
    
    

    View Slide

75. Keyboard
    Support
    It’s not just for
    Screen Readers
    

    View Slide

76. View Slide

77. type="audio/ogg">
    type="video/ogg">
    

    View Slide

78. Chrome Audio Controls
    Firefox Video Controls
    

    View Slide

79. class="audio-play">
    Custom Audio Controls
    

    View Slide

80. kind="subtitles"
    srclang="en"
    src="track.vtt" />
    

    View Slide

81. 
    
    
    

    View Slide

82. View Slide

83. View Slide

84. 
    
    

    View Slide

85. View Slide

86. 
    
    My Son...
    
    
    

    View Slide

87. 
    aria-labelledby="c">
    
    
    
    

    View Slide

88. 
    alt="photo 1">
    My Son...
    (photo 1).
    
    

    View Slide

89. 
    it’s complicated
    

    View Slide

90. 
    Shapes
    A circle and
    box.
    
    
    

    View Slide

91. http://is.gd/
    OTCv0x
    

    View Slide

92. Support
    

    View Slide

93. View Slide

94. View Slide

95. Two things
    about
    Mobile
    Accessibility
    

    View Slide

96. Test for it.
    

    View Slide

97. Use HTML5
    elements
    They’re natively
    supported
    

    View Slide

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
    

    View Slide

99. != != !=
    

    View Slide

100. Does HTML5
     improve web
     accessibility or
     make it worse?
     

     View Slide

101. It’s kinda
     both
     

     View Slide

102. How have
     screen readers
     adapted?
     

     View Slide

103. It’s getting
     better all
     the time
     

     View Slide

104. Does HTML5
     remove the
     need for
     accessibility
     testing?
     

     View Slide

105. No. Not at all.
     Test your stuff
     

     View Slide

106. The only
     constant is
     change
     

     View Slide

107. View Slide

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
     

     View Slide

109. github.com/
     klamping/
     html5tx-a11y
     @klamping
     

     View Slide