JSConfEU 2017: YES! Your site can (and should) be accessible

JSConfEU 2017: YES! Your site can (and should) be accessible

C9b6971cf9aef049f4a35bc397a5e4b9?s=128

Laura Carvajal

May 06, 2017
Tweet

Transcript

  1. Laura Carvajal Senior Developer, Financial Times @lc512k YES! Your site

    can be accessible Lessons learned in building FT.com SHOULD
  2. Laura Carvajal @lc512k Surely this doesn’t apply to us, …right?

  3. Laura Carvajal @lc512k FT.com

  4. Laura Carvajal @lc512k

  5. Laura Carvajal @lc512k

  6. Laura Carvajal @lc512k Lesson #1 It doesn’t just happen You

    make it happen
  7. Laura Carvajal @lc512k © Nicky Wrightson

  8. What is accessibility?

  9. “Web accessibility means that people with disabilities can use the

    Web” www.w3.org
  10. Laura Carvajal @lc512k

  11. “Beyond not denying access, it’s ensuring that access is fair

    for everyone” Naomí Dubitski Carvajal
  12. 1. Physical 2. Visual 3. Hearing 4. Cognitive

  13. Microsoft Persona Spectrum Matrix

  14. Microsoft Persona Spectrum Matrix

  15. Disability 1 Billion people 15% of population World Bank

  16. 26% of our users

  17. None
  18. start small

  19. > npm install -g pa11y Laura Carvajal @lc512k

  20. https://www.w3.org/TR/WCAG20/

  21. None
  22. > npm install --save pa11y-ci Laura Carvajal @lc512k

  23. Laura Carvajal @lc512k Laura Carvajal @lc512k front-page article sign-up myFT

  24. Laura Carvajal @lc512k Laura Carvajal @lc512k Node - apps GitHub

    - Repository Circle CI - Continuous Integration Heroku - Deployment
  25. Laura Carvajal @lc512k

  26. a11y: pa11y-ci https://github.com/pa11y/ci

  27. a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci

  28. a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci

  29. Laura Carvajal @lc512k

  30. a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci

  31. Laura Carvajal @lc512k

  32. Laura Carvajal @lc512k Winners!!!

  33. Laura Carvajal @lc512k Not quite

  34. Laura Carvajal @lc512k Lesson #2 Before setting the build on

    fire train people
  35. www.udacity.com/course/web-accessibility--ud891

  36. Laura Carvajal @lc512k 0 errors What now?

  37. 1. External Audit 2. Customer Research 3. DIY

  38. 1. External Audit 2. Customer Research 3. DIY

  39. None
  40. Laura Carvajal @lc512k

  41. Laura Carvajal @lc512k

  42. 1. External Audit 2. Customer Research 3. DIY

  43. Laura Carvajal @lc512k

  44. 1. External Audit 2. Customer Research 3. DIY

  45. Laura Carvajal @lc512k VoiceOver Keyboard-only Zoom

  46. Laura Carvajal @lc512k High Contrast

  47. Laura Carvajal @lc512k Laura Carvajal @lc512k Keyboard-only

  48. Laura Carvajal @lc512k

  49. Laura Carvajal @lc512k

  50. Laura Carvajal @lc512k Laura Carvajal @lc512k

  51. Laura Carvajal @lc512k Laura Carvajal @lc512k

  52. None
  53. Laura Carvajal @lc512k Laura Carvajal @lc512k

  54. Laura Carvajal @lc512k Lesson #3 Throw away your mouse

  55. Laura Carvajal @lc512k

  56. None
  57. None
  58. Laura Carvajal @lc512k

  59. Laura Carvajal @lc512k Laura Carvajal @lc512k

  60. Laura Carvajal @lc512k Lesson #4 Don’t take it all on

    yourself
  61. Laura Carvajal @lc512k

  62. Laura Carvajal @lc512k

  63. Laura Carvajal @lc512k

  64. Laura Carvajal @lc512k

  65. Laura Carvajal @lc512k Mind Blown

  66. Laura Carvajal @lc512k Lesson #5 Talk about it A lot

  67. Let me take you back… Laura Carvajal @lc512k

  68. Laura Carvajal @lc512k

  69. Laura Carvajal @lc512k

  70. Laura Carvajal @lc512k @benjfletcher

  71. Laura Carvajal @lc512k Lesson #6 Diversity improves your product your

    team you
  72. 1. A11y doesn’t just happen: pa11y-ci 2. Train your people:

    udacity course 3. Throw away your mouse: shortcuts 4. Don’t take it all on yourself: job desc 5. Talk about it: twitter 6. Diversity matters: prioritise
  73. Laura Carvajal @lc512k

  74. Laura Carvajal @lc512k

  75. Laura Carvajal @lc512k Laura Carvajal @lc512k https://help.github.com/articles/using-keyboard-shortcuts/ https://www.ractoon.com/wp-content/uploads/2012/10/sublime_text_2_shortcuts_printable_ractoon.pdf https://support.google.com/mail/answer/6594 https://support.google.com/calendar/answer/37034

    https://support.apple.com/en-gb/HT201236 https://get.slack.help/hc/en-us/articles/201374536-Slack-keyboard-shortcuts Keyboard Shortcuts http://www.karlgroves.com/2011/11/15/list-of-web-accessibility-related-litigation-and-settlements/ https://www.w3.org/WAI/bcase/resources Known Lawsuits and Settlements https://github.com/joe-watkins/top-people-to-follow-in-web-accessibility Accessibility Folks www.udacity.com/course/web-accessibility--ud891 Training