Accessibility in the 2.0 era

The purpose of this talk is to create awareness of the importance of creating apps that are accessible for the majority regardless physical, cognitive, mental, sensory or developmental problems and how to decrease the impact in the experience of our sites by using tools and techniques that help us to make life easier for people who have those disabilities.

Talked presented during MagmaConf 2015 in Manzanillo, Colima

www.magmaconf.com

Transcript

1. Accessibility
   in the
   2.0 era
   Fernando Perales @FerPeralesM
   

   View Slide

2. 
   

   View Slide

3. Fernando Perales
   Software Engineer @ Crowd Interactive
   FLOSS advocate
   /(.*) metal/ and beer love
   Passionate about web dev and lean startup.
   @FerPeralesM
   

   View Slide

4. 
   

   View Slide

5. #a11y
   

   View Slide

6. Accessibility
   

   View Slide

7. “The design of
   products, devices,
   services, or
   environments for
   people with
   disabilities”
   wikipedia.org/wiki/Accessibility
   

   View Slide

8. https://c2.staticflickr.com/6/5052/5420282382_6a9c6c64b7_b.jpg
   

   View Slide

9. http://www.maspormas.com/sites/default/files/styles/entrevista_full/public/images/large/2014/08/27/orugadeltren_ok.jpg
   

   View Slide

10. http://samar.es/site/themes/default/images/rec-val/espacio-min.jpg
    

    View Slide

11. http://intheroo.com/uploads/2010/09/mexican-pesos.jpg
    

    View Slide

12. Web
    accessibility
    

    View Slide

13. “The inclusive practice
    of removing barriers
    that prevent interaction
    with, or access to
    websites, by people
    with disabilities.”
    wikipedia.org/wiki/Web_accessibility
    

    View Slide

14. WAI
    

    View Slide

15. WAI-WCAG 2.0
    

    View Slide

16. Section 508
    

    View Slide

17. section508.gov
    

    View Slide

18. WAI-ARIA
    

    View Slide

19. WAI-ARIA defines
    roles, states, and
    properties
    

    View Slide

20. Role
    

    View Slide

21. w3.org/TR/wai-
    aria/roles
    

    View Slide

22. role=''
    

    View Slide

23. States and properties
    

    View Slide

24. aria-labelledby=''
    

    View Slide

25. aria-checked=''
    

    View Slide

26. w3.org/TR/
    wai-aria/
    states_and_properties
    

    View Slide

27. Attributes
    

    View Slide

28. Practical
    WAI-ARIA
    Practical
    WAI-ARIA
    

    View Slide

29. w3.org/TR/wai-aria-
    practices
    

    View Slide

30. Design patterns
    

    View Slide

31. Auto Complete
    (widget)
    

    View Slide

32. Description
    

    View Slide

33. A textbox and an
    associated drop-down list
    of choices where the
    choices offered are filtered
    based on the information
    typed into the box.
    

    View Slide

34. Keyboard
    Interaction
    

    View Slide

35. With focus in an empty
    textbox, press Down
    Arrow, Up Arrow,
    Alt+Down Arrow, or Alt+Up
    Arrow to display the entire
    list of choices.
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. WAI-ARIA Roles,
    States, and Properties
    

    View Slide

42. The widget has a role of
    combobox, and its parent role is
    input. It has a child with role
    textbox. The property aria-
    autocomplete indicates whether
    user input completion
    suggestions are provided.
    

    View Slide

43. Extra: example
    

    View Slide

44. Dojo autocomplete
    

    View Slide

45. Let's review the remaining
    39 patterns...
    Let's review the remaining
    39 patterns...
    

    View Slide

46. ...NOT!
    

    View Slide

47. Fortunately!
    

    View Slide

48. Semantic HTML
    

    View Slide

49. CSS?
    

    View Slide

50. Considerations
    

    View Slide

51. Kinds of
    Disabilities
    

    View Slide

52. Visual
    

    View Slide

53. Blindness
    Low vision
    Poor eyesight
    Color
    blindness
    

    View Slide

54. What will help
    

    View Slide

55. Logical HTML flow
    

    View Slide

56. Headers
    

    View Slide

57. A way to skip
    navigation or common
    parts among pages
    

    View Slide

58. 
    Skip to content
    
    

    View Slide

59. Use the right tag for
    each part of the
    document
    

    View Slide

60. Offer text as an
    alternative to images
    

    View Slide

61. Add description to
    graphs, maps and
    diagrams
    

    View Slide

62. https://fluidsurveys.com/wp-content/uploads/2013/09/Charts-PC.png
    

    View Slide

63. Forms
    

    View Slide

64. CAPTCHAs
    

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. High contrast
    

    View Slide

70. Scalable font size
    

    View Slide

71. Audio
    

    View Slide

72. What will help
    

    View Slide

73. Video with good
    captions
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. Alternative visual alert
    

    View Slide

79. Physical
    

    View Slide

80. What will
    help
    

    View Slide

81. Fully mouse –
    keyboard navigation
    

    View Slide

82. Avoid items that
    require precise
    movements
    

    View Slide

83. Forms
    

    View Slide

84. Cognitive
    

    View Slide

85. Dyslexia
    

    View Slide

86. What will
    help
    What will
    help
    

    View Slide

87. Fonts
    

    View Slide

88. sans serif > serif
    

    View Slide

89. Keep content short
    

    View Slide

90. Text
    alignment
    

    View Slide

91. Images:
    yay or nay?
    

    View Slide

92. Animations?
    

    View Slide

93. No image
    Background
    

    View Slide

94. ADD and ADHD
    

    View Slide

95. What will
    help
    

    View Slide

96. Avoid timed
    tasks
    

    View Slide

97. Instructions
    

    View Slide

98. No surprises on
    UX
    

    View Slide

99. Tools
    

    View Slide

100. Testing and audit
     

     View Slide

101. View Slide

102. 
     dequelabs/axe-core
     

     View Slide

103. Chrome developer
     tools extension
     Karma
     QUnit
     Jasmine
     Mocha
     R-Spec
     Cucumber
     Selenium Java
     Selenium JavaScript
     PhantomJS
     Any testing framework
     that supports
     JavaScript execution
     

     View Slide

104. npm install
     axe-core --save-dev
     

     View Slide

105. "node_modules/axe-<br/>core/axe.min.js"><br/>
     

     View Slide

106. View Slide

107. View Slide

108. accesslint.com
     

     View Slide

109. View Slide

110. View Slide

111. diagnosticss.github.io
     

     View Slide

112. View Slide

113. View Slide

114. View Slide

115. View Slide

116. View Slide

117. cynthiasays.com
     

     View Slide

118. View Slide

119. WAVE
     

     View Slide

120. wave.webaim.org
     

     View Slide

121. View Slide

122. View Slide

123. Colors
     

     View Slide

124. Contrast ratio
     

     View Slide

125. leaverou.github.io/
     contrast-ratio
     

     View Slide

126. View Slide

127. View Slide

128. Color Contrast
     Checker
     

     View Slide

129. webaim.org/
     resources/
     contrastchecker
     

     View Slide

130. View Slide

131. View Slide

132. Colour Contrast
     Analyzer
     

     View Slide

133. View Slide

134. Paletton
     

     View Slide

135. paletton.com
     

     View Slide

136. View Slide

137. View Slide

138. View Slide

139. Sim Daltonism
     

     View Slide

140. http://a3.mzstatic.com/us/r30/Purple4/v4/cf/0e/3b/cf0e3b46-bf9c-2627-280f-7d4863fb6808/screen800x500.jpeg
     

     View Slide

141. View Slide

142. Color oracle
     

     View Slide

143. colororacle.org
     

     View Slide

144. View Slide

145. View Slide

146. View Slide

147. Fonts
     

     View Slide

148. Screen readers
     

     View Slide

149. NVDA
     Screen reader
     

     View Slide

150. nvaccess.org
     

     View Slide

151. Voice Over
     

     View Slide

152. View Slide

153. Chromevox
     

     View Slide

154. chromevox.com
     

     View Slide

155. View Slide

156. Fangs
     

     View Slide

157. View Slide

158. View Slide

159. View Slide

160. View Slide

161. Close captioning
     

     View Slide

162. amara.org
     universalsubtitles.org
     

     View Slide

163. View Slide

164. View Slide

165. The great
     finale
     

     View Slide

166. http://vignette3.wikia.nocookie.net/uncyclopedia/images/1/10/London2012.png
     

     View Slide

167. http://2.bp.blogspot.com/-cqVRX6P3Q3g/UysNxwxQzEI/AAAAAAAAAPo/F7guy4BaiaM/s1600/sir-tim-berners-lee.jpg
     

     View Slide

168. View Slide

169. Thanks!
     

     View Slide