Slide 1
Slide 1 text
Laura Carvajal - @lc512k
Senior Developer, Financial Times
NodeConf EU, Kilkenny, November 2017
YES! Your site can be accessible
Lessons learned in building FT.com
SHOULD
Slide 2
Slide 2 text
Laura Carvajal @lc512k
Surely this
doesn’t
apply to us,
…right?
Slide 3
Slide 3 text
Laura Carvajal @lc512k
FT.com
Slide 4
Slide 4 text
Laura Carvajal @lc512k
Slide 5
Slide 5 text
Laura Carvajal @lc512k
Slide 6
Slide 6 text
Laura Carvajal @lc512k
Lesson #1
Accessibility doesn’t just happen
You make it happen
Slide 7
Slide 7 text
Laura Carvajal @lc512k © Nicky Wrightson
Slide 8
Slide 8 text
What is accessibility?
Slide 9
Slide 9 text
“Web accessibility means
that people with disabilities
can use the Web”
www.w3.org
Slide 10
Slide 10 text
Laura Carvajal @lc512k
Slide 11
Slide 11 text
“Beyond not denying access,
it’s ensuring that access
is fair for everyone”
Naomí Dubitski Carvajal
Slide 12
Slide 12 text
1. Physical
2. Visual
3. Hearing
4. Cognitive
Slide 13
Slide 13 text
Microsoft Persona Spectrum Matrix
Slide 14
Slide 14 text
Laura Carvajal @lc512k
Slide 15
Slide 15 text
Microsoft Persona Spectrum Matrix
Slide 16
Slide 16 text
Microsoft Persona Spectrum Matrix
Slide 17
Slide 17 text
Laura Carvajal @lc512k
Slide 18
Slide 18 text
Disability
1 Billion people
15% of population
World Bank
Slide 19
Slide 19 text
26% of our users
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
start small
Slide 22
Slide 22 text
> npm install -g pa11y
Laura Carvajal @lc512k
Slide 23
Slide 23 text
https://www.w3.org/TR/WCAG20/
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
> npm install --save pa11y-ci
Laura Carvajal @lc512k
Slide 26
Slide 26 text
Laura Carvajal @lc512k
Laura Carvajal @lc512k
front-page article sign-up myFT
Slide 27
Slide 27 text
Laura Carvajal @lc512k
Laura Carvajal @lc512k
Node - apps
GitHub - Repository
Circle CI - Continuous Integration
Heroku - Deployment
Slide 28
Slide 28 text
Laura Carvajal @lc512k
Slide 29
Slide 29 text
a11y:
pa11y-ci
https://github.com/pa11y/ci
Slide 30
Slide 30 text
a11y:
@export TEST_URL=http://${APP}.herokuapp.com; \
pa11y-ci -T 100
https://github.com/pa11y/ci
Slide 31
Slide 31 text
a11y:
@export TEST_URL=http://${APP}.herokuapp.com; \
pa11y-ci -T 100
https://github.com/pa11y/ci
Slide 32
Slide 32 text
Laura Carvajal @lc512k
Slide 33
Slide 33 text
a11y:
@export TEST_URL=http://${APP}.herokuapp.com; \
pa11y-ci -T 100
https://github.com/pa11y/ci
Slide 34
Slide 34 text
Laura Carvajal @lc512k
Slide 35
Slide 35 text
Laura Carvajal @lc512k
Winners!!!
Slide 36
Slide 36 text
Laura Carvajal @lc512k
Not quite
Slide 37
Slide 37 text
Laura Carvajal @lc512k
Lesson #2
Before setting the build on fire
train people
Slide 38
Slide 38 text
What did Pa11y find?
Laura Carvajal @lc512k
Slide 39
Slide 39 text
Colour contrast issues
Laura Carvajal @lc512k
What did pa11y find?
Slide 40
Slide 40 text
Laura Carvajal @lc512k
4.5 : 1
Slide 41
Slide 41 text
Alt text issues
Laura Carvajal @lc512k
What did pa11y find?
Slide 42
Slide 42 text
Laura Carvajal @lc512k
Labels
Required*
Email address*
Slide 43
Slide 43 text
Laura Carvajal @lc512k
Labels
Required*
Email address*
Slide 44
Slide 44 text
Ads
Laura Carvajal @lc512k
What did pa11y find?
…iframe soup here… (tabindex=-1)
Slide 45
Slide 45 text
Duplicate content
Laura Carvajal @lc512k
What did pa11y find?
Slide 46
Slide 46 text
Laura Carvajal @lc512k
Different?
Add context
Add
Europe to myFT
Slide 47
Slide 47 text
www.udacity.com/course/web-accessibility--ud891
Slide 48
Slide 48 text
Laura Carvajal @lc512k
0 errors
What now?
Slide 49
Slide 49 text
1. External Audit
2. Customer Research
3. DIY
Slide 50
Slide 50 text
1. External Audit
2. Customer Research
3. DIY
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Laura Carvajal @lc512k
Slide 53
Slide 53 text
Laura Carvajal @lc512k
Slide 54
Slide 54 text
1. External Audit
2. Customer Research
3. DIY
Slide 55
Slide 55 text
Laura Carvajal @lc512k
© Simon Legg
Slide 56
Slide 56 text
1. External Audit
2. Customer Research
3. DIY
Slide 57
Slide 57 text
Laura Carvajal @lc512k
VoiceOver
Keyboard-only
Zoom
Slide 58
Slide 58 text
Laura Carvajal @lc512k
Laura Carvajal @lc512k
Keyboard-only
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Laura Carvajal @lc512k
Laura Carvajal @lc512k
Slide 61
Slide 61 text
Laura Carvajal @lc512k
Lesson #3
Throw away your mouse
Slide 62
Slide 62 text
Laura Carvajal @lc512k
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
Laura Carvajal @lc512k
Slide 66
Slide 66 text
Laura Carvajal @lc512k
Laura Carvajal @lc512k
Slide 67
Slide 67 text
Laura Carvajal @lc512k
Lesson #4
Don’t take it all on yourself
Slide 68
Slide 68 text
Laura Carvajal @lc512k
Slide 69
Slide 69 text
github.com/lc512k/a11y-experiment
Slide 70
Slide 70 text
github.com/lc512k/a11y-experiment
Slide 71
Slide 71 text
Laura Carvajal @lc512k
Mind
Blown
Slide 72
Slide 72 text
Laura Carvajal @lc512k
Lesson #5
Talk about it
A lot
Slide 73
Slide 73 text
1. External Audit
2. Customer Research
3. DIY
Slide 74
Slide 74 text
1. External Audit
2. Customer Research
3. DIY
Slide 75
Slide 75 text
Laura Carvajal @lc512k
Lesson #6
“It’s the right thing to do”
doesn’t get you a budget
Slide 76
Slide 76 text
“ The only evidenced
business case […] is
avoiding litigation ”
Alice Bartlett
speakerdeck.com/alicebartlett/what-is-the-business-case-for-accessibility
Slide 77
Slide 77 text
Let me take you back…
Laura Carvajal @lc512k
Slide 78
Slide 78 text
Laura Carvajal @lc512k
Slide 79
Slide 79 text
Laura Carvajal @lc512k
Slide 80
Slide 80 text
Laura Carvajal @lc512k
@benjfletcher
Slide 81
Slide 81 text
Laura Carvajal @lc512k
Lesson #7
Diversity improves
your product
your team
your life
Slide 82
Slide 82 text
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
Slide 83
Slide 83 text
Laura Carvajal @lc512k
Slide 84
Slide 84 text
Laura Carvajal @lc512k
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
Laura Carvajal - @lc512k
Senior Developer, Financial Times
NodeConf EU, Kilkenny, November 2017
YES! Your site can be accessible
Lessons learned in building FT.com
SHOULD