Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Laura Carvajal

May 25, 2017
Tweet

More Decks by Laura Carvajal

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Laura Carvajal @lc512k
    FT.com

    View full-size slide

  4. Laura Carvajal @lc512k

    View full-size slide

  5. Laura Carvajal @lc512k

    View full-size slide

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

    View full-size slide

  7. Laura Carvajal @lc512k © Nicky Wrightson

    View full-size slide

  8. What is accessibility?

    View full-size slide

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

    View full-size slide

  10. Laura Carvajal @lc512k

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Microsoft Persona Spectrum Matrix

    View full-size slide

  14. Laura Carvajal @lc512k

    View full-size slide

  15. Microsoft Persona Spectrum Matrix

    View full-size slide

  16. Microsoft Persona Spectrum Matrix

    View full-size slide

  17. Laura Carvajal @lc512k

    View full-size slide

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

    View full-size slide

  19. Disability
    1 Billion people
    15% of population
    World Bank

    View full-size slide

  20. 26% of our users

    View full-size slide

  21. > npm install -g pa11y
    Laura Carvajal @lc512k

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Laura Carvajal @lc512k

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Laura Carvajal @lc512k

    View full-size slide

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

    View full-size slide

  32. Laura Carvajal @lc512k

    View full-size slide

  33. Laura Carvajal @lc512k
    Winners!!!

    View full-size slide

  34. Laura Carvajal @lc512k
    Not quite

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. Laura Carvajal @lc512k

    View full-size slide

  38. Laura Carvajal @lc512k
    0 errors
    What now?

    View full-size slide

  39. 1. External Audit
    2. Customer Research
    3. DIY

    View full-size slide

  40. 1. External Audit
    2. Customer Research
    3. DIY

    View full-size slide

  41. Laura Carvajal @lc512k

    View full-size slide

  42. Laura Carvajal @lc512k

    View full-size slide

  43. 1. External Audit
    2. Customer Research
    3. DIY

    View full-size slide

  44. Laura Carvajal @lc512k

    View full-size slide

  45. 1. External Audit
    2. Customer Research
    3. DIY

    View full-size slide

  46. Laura Carvajal @lc512k
    VoiceOver
    Keyboard-only
    Zoom

    View full-size slide

  47. Laura Carvajal @lc512k
    High Contrast

    View full-size slide

  48. Laura Carvajal @lc512k
    Laura Carvajal @lc512k
    Keyboard-only

    View full-size slide

  49. Laura Carvajal @lc512k

    View full-size slide

  50. Laura Carvajal @lc512k

    View full-size slide

  51. Laura Carvajal @lc512k
    Laura Carvajal @lc512k

    View full-size slide

  52. Laura Carvajal @lc512k
    Laura Carvajal @lc512k

    View full-size slide

  53. Laura Carvajal @lc512k
    Laura Carvajal @lc512k

    View full-size slide

  54. Laura Carvajal @lc512k
    Lesson #3
    Throw away your mouse

    View full-size slide

  55. Laura Carvajal @lc512k

    View full-size slide

  56. Laura Carvajal @lc512k

    View full-size slide

  57. Laura Carvajal @lc512k
    Laura Carvajal @lc512k

    View full-size slide

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

    View full-size slide

  59. Laura Carvajal @lc512k

    View full-size slide

  60. Laura Carvajal @lc512k

    View full-size slide

  61. Laura Carvajal @lc512k

    View full-size slide

  62. Laura Carvajal @lc512k

    View full-size slide

  63. Laura Carvajal @lc512k
    Mind
    Blown

    View full-size slide

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

    View full-size slide

  65. 1. External Audit
    2. Customer Research
    3. DIY

    View full-size slide

  66. 1. External Audit
    2. Customer Research
    3. DIY


    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. Laura Carvajal @lc512k
    Loss of B2C
    revenue

    View full-size slide

  70. Let me take you back…
    Laura Carvajal @lc512k

    View full-size slide

  71. Laura Carvajal @lc512k

    View full-size slide

  72. Laura Carvajal @lc512k

    View full-size slide

  73. Laura Carvajal @lc512k
    @benjfletcher

    View full-size slide

  74. Laura Carvajal @lc512k
    Lesson #6
    Diversity improves
    your product
    your team
    your life

    View full-size slide

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

    View full-size slide

  76. Laura Carvajal @lc512k

    View full-size slide

  77. Laura Carvajal @lc512k

    View full-size slide

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

    View full-size slide