Why Accessibility Matters

Creating apps for everybody by making them accessible. In this talk is addressed:

* What's accessibility
* Statistics about people with disability and limitations in México
* What do we need to do for our webapps to be accessible

Nearsoft Summer Talks 2017

Transcript

1. Why Accessibility Matters …and other related stuff
2. Isaac Zepeda Software Dev izepeda@nearsoft.com @el_keogh github.com/keogh isaaczepeda.com
3. Based on: “Why Accessibility Matters” https://medium.com/points-san-francisco/why-accessibility-matters-7ca6762ec0b5
4. What’s Accessibility?
5. Story Time!
8. Statistics
9. > 14% Had a disability worldwide in 2011 http://who.int/disabilities/world_report/2011/en/ http://www.who.int/disabilities/infographic/en/
10. That’s over 1 billion people
12. 6% Had a disability in 2014. INEGI. http://internet.contenidos.inegi.org.mx/contenidos/productos/prod_serv/contenidos /espanol/bvinegi/productos/nueva_estruc/702825090203.pdf
13. That’s 7.1 million people
14. 7.1M that cannot or have too much difficulty to... 1. Walk, go up or down using their legs 2. See (whether or not they use glasses) 3. Move or use arms or hands 4. Learn, remember or focus 5. Listen to (whether or not they use a hearing aid device) 6. Bath, dress or eat 7. Speak or communicate 8. Have emotional or mental problems
17. Y son estas personas quienes enfrentan múltiples obstáculos (OMS, 2014) para gozar “de todos los derechos que establece el orden jurídico mexicano, sin distinción de origen étnico, nacional, género, edad, condición social, económica o de salud, religión, opiniones, estado civil, preferencias sexuales, embarazo, identidad política, lengua, situación migratoria o cualquier otra característica propia de la condición humana o que atente contra su dignidad” (DOF, 2011: 2).
18. 15.8M Have a limitation. 2014. INEGI (that’s 13.2%)
19. People with a limitation are those that have minor or moderated difficulties to perform the same activities
21. 7.1 + 15.8 Makes a big total of...
22. 22.9 millions have a disability or a limitation… That’s around 19% of Mexico population
24. Source: La Discapacidad en México 2015. INEGI http://internet.contenidos.inegi.org.mx/contenidos/productos/p rod_serv/contenidos/espanol/bvinegi/productos/nueva_estruc/ 702825090203.pdf
25. There’s also temporary disability
26. Probably everyone eventually would have a disability
27. What’s Accessibility?
28. Accessibility is to create something for everybody
30. It’s about survival
31. Everything is online
32. … but not everything online is accessible
34. Accessibility is empathy
35. Accessibility benefits everyone
36. How do we create accessible web apps?
37. It’s hard...
38. https://www.youtube.com/watch?v=2qjgxH384Nc
40. 7.1M that cannot or have too much difficulty to... 1. Walk, go up or down using their legs 2. See (whether or not they use glasses) 3. Move or use arms or hands 4. Learn, remember or focus 5. Listen to (whether or not they use a hearing aid device) 6. Bath, dress and eat 7. Speak or communicate 8. Have emotional or mental problems
42. Visual Screen readers (VoiceOver, JAWS) Braille devices Screen magnification Zoom functionality High contrast mode
43. Motor Don’t want to use the mouse Navigate keyboard only Camera that follow eyes
44. Auditory Don’t rely solely on sound to convey information Captioning Transcripts Visual indicator if there’s background sound
45. Cognitive Minimize distractions (like unnecessary animations) Zoom functionality Clean text Small content paragraphs Good spacing
46. That’s a lot of stuff...
47. WCAG 2.0 Web Content Accessibility Guidelines (WCAG) 2.0 defines how to make Web content more accessible to people with disabilities https://www.w3.org/TR/WCAG/
48. WebAIM Checklist http://webaim.org/standards/wcag/che cklist Perceivable Operable Understandable Robust
49. Keyboard Support Natural DOM flow Tab/Actionable elements Don’t use divs as links or buttons Use the DOM Tabindex
50. Semantics Semantics helps interfaces, other than visual, to understand you app Use HTML tags (p, nav, article, etc) WAI-ARIA
51. WAI-ARIA
52. WAI-ARIA The Web Accessibility Initiative - Accessible Rich Internet Applications (ARIA) specification adds the ability to modify and enhance the semantic meaning of elements in the DOM Does not change behavior Makes you app more semantic https://www.w3.org/TR/wai-aria-practices-1.1/
54. https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/
55. https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/
56. Accessibility according with people w/disabilities https://axesslab.com/accessibility-according-to-pwd/
57. Accessibility according with people w/disabilities Lack of captions Motion, animations and cluttered pages Small font size Zooming problems Low contrasts and image of text Bright color schemes Mouse-focused sites Too small touch-targets
58. That’s a lot of stuff...
59. Approach it as the evolution generates new species (Little incremental mutations)
60. Conclusions Accessibility is empathy Eventually everyone will have a disability Better accessibility equals better user experience Follow the WCAG 2.0 Nail the checklist Check the WAI-ARIA
61. Conclusions - for your webapp Use good contrast colors Navigate using only the keyboard Zoom support Use the DOM as it is intended Create your layout with natural order Add semantics (ARIA)
62. Sources https://medium.com/points-san-francisco/why-accessibility-matters-7ca6762ec0b5 (Why Accessibility Matters) http://internet.contenidos.inegi.org.mx/contenidos/productos/prod_serv/contenidos/espanol/bvinegi/productos/nue va_estruc/702825090203.pdf (La discapacidad en México, datos al 2014. INEGI.2014 ) http://who.int/disabilities/world_report/2011/en/ http://www.who.int/disabilities/infographic/en/ https://www.w3.org/TR/WCAG/ (WCAG 2.0) http://webaim.org/standards/wcag/checklist (WebAim Checklist) https://www.w3.org/TR/wai-aria-practices-1.1/ (WAI-ARIA Practices) https://www.youtube.com/watch?v=2qjgxH384Nc (Accessibility is my favorite part of the platform) https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/
63. Q&A NS Summer Talks 2017 • Isaac Zepeda • @el_keogh • izepeda@nearsoft.com
64. Gracias NS Summer Talks 2017 • Isaac Zepeda • @el_keogh • izepeda@nearsoft.com