LondonJS - Yes! Your site can (and should) be accessible too

Slide 44 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

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. “Beyond not denying access, it’s ensuring that access is fair for everyone” Naomí Dubitski Carvajal
19. Disability 1 Billion people 15% of population World Bank
20. 26% of our users
22. start small
23. > npm install -g pa11y Laura Carvajal @lc512k
24. https://www.w3.org/TR/WCAG20/
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. www.udacity.com/course/web-accessibility--ud891
40. Laura Carvajal @lc512k
41. Laura Carvajal @lc512k 0 errors What now?
42. 1. External Audit 2. Customer Research 3. DIY
43. 1. External Audit 2. Customer Research 3. DIY
45. Laura Carvajal @lc512k
46. Laura Carvajal @lc512k
47. 1. External Audit 2. Customer Research 3. DIY
48. Laura Carvajal @lc512k
49. 1. External Audit 2. Customer Research 3. DIY
50. Laura Carvajal @lc512k VoiceOver Keyboard-only Zoom
51. Laura Carvajal @lc512k High Contrast
52. Laura Carvajal @lc512k Laura Carvajal @lc512k Keyboard-only
53. Laura Carvajal @lc512k
54. Laura Carvajal @lc512k
55. Laura Carvajal @lc512k Laura Carvajal @lc512k
56. Laura Carvajal @lc512k Laura Carvajal @lc512k
58. Laura Carvajal @lc512k Laura Carvajal @lc512k
59. Laura Carvajal @lc512k Lesson #3 Throw away your mouse
60. Laura Carvajal @lc512k
63. Laura Carvajal @lc512k
64. Laura Carvajal @lc512k Laura Carvajal @lc512k
65. Laura Carvajal @lc512k Lesson #4 Don’t take it all on yourself
66. Laura Carvajal @lc512k
67. Laura Carvajal @lc512k
68. Laura Carvajal @lc512k
69. Laura Carvajal @lc512k
70. Laura Carvajal @lc512k Mind Blown
71. Laura Carvajal @lc512k Lesson #5 Talk about it A lot
72. 1. External Audit 2. Customer Research 3. DIY
73. 1. External Audit 2. Customer Research 3. DIY
74. Laura Carvajal @lc512k Lesson #6 “It’s the right thing to do” doesn’t get you a budget
75. “ The only evidenced business case […] is avoiding litigation ” Alice Bartlett speakerdeck.com/alicebartlett/what-is-the-business-case-for-accessibility
76. Laura Carvajal @lc512k Loss of B2C revenue
77. Let me take you back… Laura Carvajal @lc512k
78. Laura Carvajal @lc512k
79. Laura Carvajal @lc512k
80. Laura Carvajal @lc512k @benjfletcher
81. Laura Carvajal @lc512k Lesson #6 Diversity improves your product your team your life
82. 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: training 5. Talk about it: twitter 6. Diversity matters: prioritise
83. Laura Carvajal @lc512k
84. Laura Carvajal @lc512k
85. 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