Fluent Conference 2017 - Yes! Your site can (and should) be accessible too!

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://www.udacity.com/course/web-accessibility--ud891

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

Transcript

1. Laura Carvajal - @lc512k Senior Developer, Financial Times Fluent Conference, San Jose, California 2017 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
21. start small
22. > npm install -g pa11y Laura Carvajal @lc512k
23. https://www.w3.org/TR/WCAG20/
25. > npm install --save pa11y-ci Laura Carvajal @lc512k
26. Laura Carvajal @lc512k Laura Carvajal @lc512k front-page article sign-up myFT
27. Laura Carvajal @lc512k Laura Carvajal @lc512k Node - apps GitHub - Repository Circle CI - Continuous Integration Heroku - Deployment
28. Laura Carvajal @lc512k
29. a11y: pa11y-ci https://github.com/pa11y/ci
30. a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci
31. a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci
32. Laura Carvajal @lc512k
33. a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci
34. Laura Carvajal @lc512k
35. Laura Carvajal @lc512k Winners!!!
36. Laura Carvajal @lc512k Not quite
37. Laura Carvajal @lc512k Lesson #2 Before setting the build on fire train people
38. What did Pa11y find? Laura Carvajal @lc512k
39. Colour contrast issues Laura Carvajal @lc512k What did pa11y find?
40. Laura Carvajal @lc512k
41. Laura Carvajal @lc512k 4.5 : 1
42. Alt text issues Laura Carvajal @lc512k What did pa11y find?
43. Alt text issues Laura Carvajal @lc512k What did pa11y find? <img src=“image.jpg”>
44. Alt text issues Laura Carvajal @lc512k What did pa11y find? <img alt=“text” src=“image.jpg”>
45. 1. Decorative 2. Conveys information 3. Conveys complex of information
46. 1. Decorative 2. Conveys information 3. Conveys complex of information
47. Laura Carvajal @lc512k Decorative
48. Laura Carvajal @lc512k Decorative <img alt=“” src=“trump.jpg”>
49. Laura Carvajal @lc512k Decorative <img alt=“” role=“presentation” … >
50. 1. Decorative 2. Conveys information 3. Conveys complex of information
51. Laura Carvajal @lc512k Conveys information
52. Laura Carvajal @lc512k Conveys information <img alt=“Candidates cast their…” … >
53. 1. Decorative 2. Conveys information 3. Conveys complex of information
54. Laura Carvajal @lc512k Conveys complex information
55. Laura Carvajal @lc512k Conveys complex information <img longdesc=“exp.html” … >
56. Laura Carvajal @lc512k Conveys complex information <img longdesc=“exp.html” … >
57. Laura Carvajal @lc512k Conveys complex information <img alt=“Gaps in poll predictions” … > <a href=“exp.html”>In the state of…</a>
58. Laura Carvajal @lc512k Conveys complex information PNG
59. Laura Carvajal @lc512k Conveys complex information SVG
60. Forms Laura Carvajal @lc512k What did pa11y find?
61. Laura Carvajal @lc512k Labels Required*
62. Laura Carvajal @lc512k Labels Required* <label for=“email”>Email address*</label> <input id=“email”>
63. Laura Carvajal @lc512k Labels Required* <label for=“email”>Email address*</label> <input id=“email” required>
64. Ads Laura Carvajal @lc512k What did pa11y find?
65. Ads Laura Carvajal @lc512k What did pa11y find? <div class=“ad-wrap” aria-hidden=“true”> …iframe soup here… </div>
66. Ads Laura Carvajal @lc512k What did pa11y find? <div class=“ad-wrap” aria-hidden=“true”> …iframe soup here… (tabindex=-1) </div>
67. Duplicate content Laura Carvajal @lc512k What did pa11y find?
68. Laura Carvajal @lc512k Same thing? Keep only one
69. Laura Carvajal @lc512k Same thing? Keep only one <div aria-hidden=“true”>Latest on…</div>
70. Laura Carvajal @lc512k Different things? Add context
71. Laura Carvajal @lc512k Different? Add context <button>Add to myFT</button>
72. Laura Carvajal @lc512k Different? Add context <button>Add <span class=“vis-hidden”> Europe </span>to myFT</button>
73. www.udacity.com/course/web-accessibility--ud891
74. Laura Carvajal @lc512k 0 errors What now?
75. 1. External Audit 2. Customer Research 3. DIY
76. 1. External Audit 2. Customer Research 3. DIY
78. Laura Carvajal @lc512k
79. Laura Carvajal @lc512k
80. 1. External Audit 2. Customer Research 3. DIY
81. Laura Carvajal @lc512k © Simon Legg
82. 1. External Audit 2. Customer Research 3. DIY
83. Laura Carvajal @lc512k VoiceOver Keyboard-only Zoom
84. Laura Carvajal @lc512k Laura Carvajal @lc512k Keyboard-only
86. Laura Carvajal @lc512k Laura Carvajal @lc512k
87. Laura Carvajal @lc512k Lesson #3 Throw away your mouse
88. Laura Carvajal @lc512k
91. Laura Carvajal @lc512k
92. Laura Carvajal @lc512k Laura Carvajal @lc512k
93. Laura Carvajal @lc512k Lesson #4 Don’t take it all on yourself
94. Laura Carvajal @lc512k
95. github.com/lc512k/a11y-experiment
96. github.com/lc512k/a11y-experiment
97. Laura Carvajal @lc512k Mind Blown
98. Laura Carvajal @lc512k Lesson #5 Talk about it A lot
99. 1. External Audit 2. Customer Research 3. DIY
100. 1. External Audit 2. Customer Research 3. DIY
101. Laura Carvajal @lc512k Lesson #6 “It’s the right thing to do” doesn’t get you a budget
102. “ The only evidenced business case […] is avoiding litigation ” Alice Bartlett speakerdeck.com/alicebartlett/what-is-the-business-case-for-accessibility
103. Let me take you back… Laura Carvajal @lc512k
104. Laura Carvajal @lc512k
105. Laura Carvajal @lc512k
106. Laura Carvajal @lc512k @benjfletcher
107. Laura Carvajal @lc512k Lesson #7 Diversity improves your product your team your life
108. 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
109. Laura Carvajal @lc512k
110. Laura Carvajal @lc512k
111. 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