YES! Your site can (and should) be accessible

Laura Carvajal Senior Developer, Financial Times @lc512k YES! Your site
can be accessible Lessons learned in building FT.com SHOULD

Laura Carvajal @lc512k Surely this doesn’t apply to us, …right?

Laura Carvajal @lc512k FT.com

Laura Carvajal @lc512k

Laura Carvajal @lc512k Lesson #1 It doesn’t just happen You
make it happen

Laura Carvajal @lc512k © Nicky Wrightson

Accessibility in CI From “0 Errors” to AA Common issues
How not to sell it to the business Making it long-lasting

“Web accessibility means that people with disabilities can use the
Web” www.w3.org

“Beyond not denying access, it’s ensuring that access is fair
for everyone” Naomí Dubitski Carvajal

1. Physical 2. Visual 3. Hearing 4. Cognitive

Microsoft Persona Spectrum Matrix

Disability 1 Billion people 15% of population World Bank

26% of our users

start small

> npm install -g pa11y Laura Carvajal @lc512k

https://www.w3.org/TR/WCAG20/

http://webaim.org/standards/wcag/checklist

> npm install --save pa11y-ci Laura Carvajal @lc512k

Laura Carvajal @lc512k front-page article sign-up myFT

Laura Carvajal @lc512k Node - apps GitHub - Repository Circle
CI - Continuous Integration Heroku - Deployment

a11y: pa11y-ci https://github.com/pa11y/ci

a11y: @export TEST_URL=http://${APP}.herokuapp.com; \ pa11y-ci -T 100 https://github.com/pa11y/ci

Laura Carvajal @lc512k Winners!!!

Laura Carvajal @lc512k Not quite

Laura Carvajal @lc512k Lesson #2 Before setting the build on
fire train people

What did Pa11y find? Laura Carvajal @lc512k

Colour contrast issues Laura Carvajal @lc512k What did pa11y find?

Laura Carvajal @lc512k ¯\_(ツ)_/¯ What did pa11y find?

OK OK FAIL PASS

Laura Carvajal @lc512k What did pa11y find?

Ads Laura Carvajal @lc512k What did pa11y find?

http://webaim.org/standards/wcag/checklist

www.udacity.com/course/web-accessibility--ud891

Laura Carvajal @lc512k 0 errors What now?

1. External Audit 2. Customer Research 3. DIY

Laura Carvajal @lc512k Screen Reader Keyboard Zoom

Laura Carvajal @lc512k High Contrast

Laura Carvajal @lc512k ⌥alt

Laura Carvajal @lc512k Lesson #3 Throw away your mouse

Laura Carvajal @lc512k Lesson #4 Don’t take it all on
yourself

Laura Carvajal @lc512k Mind Blown

Laura Carvajal @lc512k Lesson #5 Talk about it A lot

Laura Carvajal @lc512k Lesson #6 “It’s the right thing to
do” doesn’t get you a budget

“ The only evidenced business case […] is avoiding litigation ” Alice
Bartlett speakerdeck.com/alicebartlett/what-is-the-business-case-for-accessibility

Let me take you back… Laura Carvajal @lc512k

Laura Carvajal @lc512k @benjfletcher

Laura Carvajal @lc512k Lesson #7 Diversity improves your product your
team you

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

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

YES! Your site can (and should) be accessible

YES! Your site can (and should) be accessible

More Decks by Laura Carvajal

Other Decks in Technology

Featured

Transcript