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

Shift Developer Conference 2017 - Yes! Your site can (and should) be accessible

Shift Developer Conference 2017 - Yes! Your site can (and should) be accessible

Lessons learned in building FT.com

DAC Video: https://www.youtube.com/watch?v=4JCbyOuWVII

In 2016, the Financial Times launched a new version of its website to great success. It broke ground on key areas like performance, resilience, and usability. But one day, rather serendipitously, the team that created the site realized they had largely forgotten to measure one thing: accessibility. And you can’t improve what you don’t measure.

Laura Carvajal explains how her team introduced accessibility to the Financial Times website, FT.com—and their journey from being generally oblivious about accessibility to making it a core part of their process across multiple divisions. Laura shares the the roadblocks encountered and lessons learned along the way as well as practical solutions you can implement in your project today, regardless of available time, resources, or support.

REFERENCES

Keyboard Shortcuts
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

Training
https://github.com/joe-watkins/top-people-to-follow-in-web-accessibility

Accessibility Folks
https://github.com/joe-watkins/top-people-to-follow-in-web-accessibility

Known Lawsuits and Settlements
http://www.karlgroves.com/2011/11/15/list-of-web-accessibility-related-litigation-and-settlements/
https://www.w3.org/WAI/bcase/resources

C9b6971cf9aef049f4a35bc397a5e4b9?s=128

Laura Carvajal

June 02, 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. Laura Carvajal @lc512k

  15. Microsoft Persona Spectrum Matrix

  16. Microsoft Persona Spectrum Matrix

  17. Laura Carvajal @lc512k

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

  19. 26% of our users

  20. None
  21. start small

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

  23. Laura Carvajal @lc512k pa11y.org

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

  25. None
  26. > npm install --save pa11y-ci Laura Carvajal @lc512k

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

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

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

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

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

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

  33. Laura Carvajal @lc512k

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

  35. Laura Carvajal @lc512k

  36. Laura Carvajal @lc512k Winners!!!

  37. Laura Carvajal @lc512k Not quite

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

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

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

  41. Laura Carvajal @lc512k

  42. Laura Carvajal @lc512k 4.5 : 1

  43. Alt text issues Laura Carvajal @lc512k What did pa11y find?

  44. Alt text issues Laura Carvajal @lc512k What did pa11y find?

    <img src=“image.jpg”>
  45. Alt text issues Laura Carvajal @lc512k What did pa11y find?

    <img alt=“text” src=“image.jpg”>
  46. 1. Decorative 2. Conveys information 3. Conveys complex of information

  47. 1. Decorative 2. Conveys information 3. Conveys complex of information

  48. Laura Carvajal @lc512k Decorative

  49. Laura Carvajal @lc512k Decorative <img alt=“” src=“trump.jpg”>

  50. Laura Carvajal @lc512k Decorative <img alt=“” role=“presentation” … >

  51. 1. Decorative 2. Conveys information 3. Conveys complex of information

  52. Laura Carvajal @lc512k Conveys information

  53. Laura Carvajal @lc512k Conveys information <img alt=“Candidates cast their…” …

    >
  54. 1. Decorative 2. Conveys information 3. Conveys complex of information

  55. Laura Carvajal @lc512k Conveys complex information

  56. Laura Carvajal @lc512k Conveys complex information <img longdesc=“exp.html” … >

  57. Laura Carvajal @lc512k Conveys complex information <img longdesc=“exp.html” … >

  58. Laura Carvajal @lc512k Conveys complex information <img alt=“Gaps in poll

    predictions” … > <a href=“exp.html”>In the state of…</a>
  59. Laura Carvajal @lc512k Conveys complex information PNG

  60. Laura Carvajal @lc512k Conveys complex information SVG

  61. Forms Laura Carvajal @lc512k What did pa11y find?

  62. Laura Carvajal @lc512k Labels Required*

  63. Laura Carvajal @lc512k Labels Required* <label for=“email”>Email address*</label> <input id=“email”>

  64. Laura Carvajal @lc512k Labels Required* <label for=“email”>Email address*</label> <input id=“email”

    required>
  65. Ads Laura Carvajal @lc512k What did pa11y find?

  66. Ads Laura Carvajal @lc512k What did pa11y find? <div class=“ad-wrap”

    aria-hidden=“true”> …iframe soup here… </div>
  67. Ads Laura Carvajal @lc512k What did pa11y find? <div class=“ad-wrap”

    aria-hidden=“true”> …iframe soup here… (tabindex=-1) </div>
  68. Duplicate content Laura Carvajal @lc512k What did pa11y find?

  69. Laura Carvajal @lc512k Same thing? Keep only one

  70. Laura Carvajal @lc512k Same thing? Keep only one <div aria-hidden=“true”>Latest

    on…</div>
  71. Laura Carvajal @lc512k Different things? Add context

  72. Laura Carvajal @lc512k Different? Add context <button>Add to myFT</button>

  73. Laura Carvajal @lc512k Different? Add context <button>Add <span class=“vis-hidden”> Europe

    </span>to myFT</button>
  74. www.udacity.com/course/web-accessibility--ud891

  75. Laura Carvajal @lc512k 0 errors What now?

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

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

  78. None
  79. Laura Carvajal @lc512k

  80. Laura Carvajal @lc512k

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

  82. Laura Carvajal @lc512k

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

  84. Laura Carvajal @lc512k VoiceOver Keyboard-only Zoom

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

  86. None
  87. Laura Carvajal @lc512k Laura Carvajal @lc512k

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

  89. Laura Carvajal @lc512k

  90. None
  91. None
  92. Laura Carvajal @lc512k

  93. Laura Carvajal @lc512k Laura Carvajal @lc512k

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

    yourself
  95. Laura Carvajal @lc512k

  96. github.com/lc512k/a11y-experiment

  97. github.com/lc512k/a11y-experiment

  98. Laura Carvajal @lc512k Mind Blown

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

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

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

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

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

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

  105. Laura Carvajal @lc512k

  106. Laura Carvajal @lc512k

  107. Laura Carvajal @lc512k @benjfletcher

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

    team your life
  109. 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: share the load 5. Talk about it: twitter, roadshow 6. Budget: avoid litigation 7. Diversity matters: prioritise slides: http://tiny.cc/a11y
  110. Laura Carvajal @lc512k

  111. Laura Carvajal @lc512k

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