Upgrade to Pro — share decks privately, control downloads, hide ads and more …

YES! Your site can (and should) be accessible

YES! Your site can (and should) be accessible

London Web Standards. March 2017. Lessons learned in building FT.com. Video at: https://vimeo.com/215169705

C9b6971cf9aef049f4a35bc397a5e4b9?s=128

Laura Carvajal

March 20, 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. Accessibility in CI From “0 Errors” to AA Common issues

    How not to sell it to the business Making it long-lasting
  9. “Web accessibility means that people with disabilities can use the

    Web” www.w3.org
  10. “Beyond not denying access, it’s ensuring that access is fair

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

  12. Microsoft Persona Spectrum Matrix

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

  14. 26% of our users

  15. start small

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

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

  18. http://webaim.org/standards/wcag/checklist

  19. None
  20. > npm install --save pa11y-ci Laura Carvajal @lc512k

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

  22. Laura Carvajal @lc512k Node - apps GitHub - Repository Circle

    CI - Continuous Integration Heroku - Deployment
  23. Laura Carvajal @lc512k

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

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

  26. Laura Carvajal @lc512k

  27. Laura Carvajal @lc512k

  28. Laura Carvajal @lc512k Winners!!!

  29. Laura Carvajal @lc512k Not quite

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

    fire train people
  31. What did Pa11y find? Laura Carvajal @lc512k

  32. Colour contrast issues Laura Carvajal @lc512k What did pa11y find?

  33. Laura Carvajal @lc512k ¯\_(ツ)_/¯ What did pa11y find?

  34. OK OK FAIL PASS

  35. Laura Carvajal @lc512k What did pa11y find?

  36. Ads Laura Carvajal @lc512k What did pa11y find?

  37. http://webaim.org/standards/wcag/checklist

  38. www.udacity.com/course/web-accessibility--ud891

  39. Laura Carvajal @lc512k 0 errors What now?

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

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

  42. None
  43. Laura Carvajal @lc512k

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

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

  46. Laura Carvajal @lc512k Screen Reader Keyboard Zoom

  47. Laura Carvajal @lc512k High Contrast

  48. Laura Carvajal @lc512k

  49. Laura Carvajal @lc512k

  50. Laura Carvajal @lc512k

  51. Laura Carvajal @lc512k ⌥alt

  52. None
  53. Laura Carvajal @lc512k

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

  55. Laura Carvajal @lc512k

  56. Laura Carvajal @lc512k

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

    yourself
  58. Laura Carvajal @lc512k

  59. Laura Carvajal @lc512k

  60. Laura Carvajal @lc512k

  61. Laura Carvajal @lc512k

  62. Laura Carvajal @lc512k

  63. Laura Carvajal @lc512k

  64. Laura Carvajal @lc512k Mind Blown

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

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

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

  68. Laura Carvajal @lc512k Lesson #6 “It’s the right thing to

    do” doesn’t get you a budget
  69. “ The only evidenced business case […] is avoiding litigation ” Alice

    Bartlett speakerdeck.com/alicebartlett/what-is-the-business-case-for-accessibility
  70. Let me take you back… Laura Carvajal @lc512k

  71. Laura Carvajal @lc512k

  72. Laura Carvajal @lc512k

  73. Laura Carvajal @lc512k @benjfletcher

  74. Laura Carvajal @lc512k Lesson #7 Diversity improves your product your

    team you
  75. 1. A11y doesn’t just happen 2. Train your people 3.

    Throw away your mouse 4. Sell it right (if you must) 5. Don’t take it all on yourself 6. Talk about it 7. Diversity matters
  76. Laura Carvajal @lc512k

  77. Laura Carvajal @lc512k

  78. 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