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

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