Accessibility in the 2.0 era

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

6c137ee3013821b517c4b9beed0145df?s=128

Fernando Perales

June 05, 2015
Tweet

Transcript

  1. Accessibility in the 2.0 era Fernando Perales @FerPeralesM

  2. <me>

  3. Fernando Perales Software Engineer @ Crowd Interactive FLOSS advocate /(.*)

    metal/ and beer love Passionate about web dev and lean startup. @FerPeralesM
  4. </me>

  5. #a11y

  6. Accessibility

  7. “The design of products, devices, services, or environments for people

    with disabilities” wikipedia.org/wiki/Accessibility
  8. https://c2.staticflickr.com/6/5052/5420282382_6a9c6c64b7_b.jpg

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

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

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

  12. Web accessibility

  13. “The inclusive practice of removing barriers that prevent interaction with,

    or access to websites, by people with disabilities.” wikipedia.org/wiki/Web_accessibility
  14. WAI

  15. WAI-WCAG 2.0

  16. Section 508

  17. section508.gov

  18. WAI-ARIA

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

  20. Role

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

  22. role=''

  23. States and properties

  24. aria-labelledby=''

  25. aria-checked=''

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

  27. Attributes

  28. Practical WAI-ARIA Practical WAI-ARIA

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

  30. Design patterns

  31. Auto Complete (widget)

  32. Description

  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.
  34. Keyboard Interaction

  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.
  36. None
  37. None
  38. None
  39. None
  40. None
  41. WAI-ARIA Roles, States, and Properties

  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.
  43. Extra: example

  44. Dojo autocomplete

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

    39 patterns...
  46. ...NOT!

  47. Fortunately!

  48. Semantic HTML

  49. CSS?

  50. Considerations

  51. Kinds of Disabilities

  52. Visual

  53. Blindness Low vision Poor eyesight Color blindness

  54. What will help

  55. Logical HTML flow

  56. Headers

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

  58. <a href='content'> Skip to content </a>

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

  60. Offer text as an alternative to images

  61. Add description to graphs, maps and diagrams

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

  63. Forms

  64. CAPTCHAs

  65. None
  66. None
  67. None
  68. None
  69. High contrast

  70. Scalable font size

  71. Audio

  72. What will help

  73. Video with good captions

  74. None
  75. None
  76. None
  77. None
  78. Alternative visual alert

  79. Physical

  80. What will help

  81. Fully mouse – keyboard navigation

  82. Avoid items that require precise movements

  83. Forms

  84. Cognitive

  85. Dyslexia

  86. What will help What will help

  87. Fonts

  88. sans serif > serif

  89. Keep content short

  90. Text alignment

  91. Images: yay or nay?

  92. Animations?

  93. No image Background

  94. ADD and ADHD

  95. What will help

  96. Avoid timed tasks

  97. Instructions

  98. No surprises on UX

  99. Tools

  100. Testing and audit

  101. None
  102.  dequelabs/axe-core

  103. Chrome developer tools extension Karma QUnit Jasmine Mocha R-Spec Cucumber

    Selenium Java Selenium JavaScript PhantomJS Any testing framework that supports JavaScript execution
  104. npm install axe-core --save-dev

  105. <script src= "node_modules/axe- core/axe.min.js"> </script>

  106. None
  107. None
  108. accesslint.com

  109. None
  110. None
  111. diagnosticss.github.io

  112. None
  113. None
  114. None
  115. None
  116. None
  117. cynthiasays.com

  118. None
  119. WAVE

  120. wave.webaim.org

  121. None
  122. None
  123. Colors

  124. Contrast ratio

  125. leaverou.github.io/ contrast-ratio

  126. None
  127. None
  128. Color Contrast Checker

  129. webaim.org/ resources/ contrastchecker

  130. None
  131. None
  132. Colour Contrast Analyzer

  133. None
  134. Paletton

  135. paletton.com

  136. None
  137. None
  138. None
  139. Sim Daltonism

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

  141. None
  142. Color oracle

  143. colororacle.org

  144. None
  145. None
  146. None
  147. Fonts

  148. Screen readers

  149. NVDA Screen reader

  150. nvaccess.org

  151. Voice Over

  152. None
  153. Chromevox

  154. chromevox.com

  155. None
  156. Fangs

  157. None
  158. None
  159. None
  160. None
  161. Close captioning

  162. amara.org universalsubtitles.org

  163. None
  164. None
  165. The great finale

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

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

  168. None
  169. Thanks!