JSConfEU 2017: YES! Your site can (and should) be accessible

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. Microsoft Persona Spectrum Matrix
15. Disability 1 Billion people 15% of population World Bank
16. 26% of our users
18. start small
19. > npm install -g pa11y Laura Carvajal @lc512k
20. https://www.w3.org/TR/WCAG20/
22. > npm install --save pa11y-ci Laura Carvajal @lc512k
23. Laura Carvajal @lc512k Laura Carvajal @lc512k front-page article sign-up myFT
24. Laura Carvajal @lc512k Laura Carvajal @lc512k Node - apps GitHub - Repository Circle CI - Continuous Integration Heroku - Deployment
25. Laura Carvajal @lc512k
26. a11y: pa11y-ci https://github.com/pa11y/ci
27. a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci
28. a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci
29. Laura Carvajal @lc512k
30. a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci
31. Laura Carvajal @lc512k
32. Laura Carvajal @lc512k Winners!!!
33. Laura Carvajal @lc512k Not quite
34. Laura Carvajal @lc512k Lesson #2 Before setting the build on fire train people
35. www.udacity.com/course/web-accessibility--ud891
36. Laura Carvajal @lc512k 0 errors What now?
37. 1. External Audit 2. Customer Research 3. DIY
38. 1. External Audit 2. Customer Research 3. DIY
40. Laura Carvajal @lc512k
41. Laura Carvajal @lc512k
42. 1. External Audit 2. Customer Research 3. DIY
43. Laura Carvajal @lc512k
44. 1. External Audit 2. Customer Research 3. DIY
45. Laura Carvajal @lc512k VoiceOver Keyboard-only Zoom
46. Laura Carvajal @lc512k High Contrast
47. Laura Carvajal @lc512k Laura Carvajal @lc512k Keyboard-only
48. Laura Carvajal @lc512k
49. Laura Carvajal @lc512k
50. Laura Carvajal @lc512k Laura Carvajal @lc512k
51. Laura Carvajal @lc512k Laura Carvajal @lc512k
53. Laura Carvajal @lc512k Laura Carvajal @lc512k
54. Laura Carvajal @lc512k Lesson #3 Throw away your mouse
55. Laura Carvajal @lc512k
58. Laura Carvajal @lc512k
59. Laura Carvajal @lc512k Laura Carvajal @lc512k
60. Laura Carvajal @lc512k Lesson #4 Don’t take it all on yourself
61. Laura Carvajal @lc512k
62. Laura Carvajal @lc512k
63. Laura Carvajal @lc512k
64. Laura Carvajal @lc512k
65. Laura Carvajal @lc512k Mind Blown
66. Laura Carvajal @lc512k Lesson #5 Talk about it A lot
67. Let me take you back… Laura Carvajal @lc512k
68. Laura Carvajal @lc512k
69. Laura Carvajal @lc512k
70. Laura Carvajal @lc512k @benjfletcher
71. Laura Carvajal @lc512k Lesson #6 Diversity improves your product your team you
72. 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: job desc 5. Talk about it: twitter 6. Diversity matters: prioritise
73. Laura Carvajal @lc512k
74. Laura Carvajal @lc512k
75. 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