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

Web Accessibility: It Doesn't Have to Be Hard

Web Accessibility: It Doesn't Have to Be Hard

Talk at Google Developer Experts Summit and World Usability Day

Ire Aderinokun

November 27, 2017
Tweet

More Decks by Ire Aderinokun

Other Decks in Programming

Transcript

  1. Web Accessibility:
    It doesn’t have to be hard
    World Usability Day
    Lagos, 2017

    View Slide

  2. Ire Aderinokun

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. Why is
    Accessibility Important?

    View Slide

  7. View Slide

  8. 1. Accessible Site’s are
    Great for Everyone

    View Slide

  9. Who are you building
    your site for?

    View Slide

  10. “Abled” or “Disabled”?

    View Slide

  11. View Slide

  12. ???

    View Slide

  13. View Slide

  14. Temporary and Situational
    Disabilities

    View Slide

  15. Vision
    “Abled” Temporarily Disabled
    Situationally Disabled “Disabled”

    View Slide

  16. Hearing
    “Abled” Temporarily Disabled
    Situationally Disabled “Disabled”

    View Slide

  17. View Slide

  18. 2. The web, by default,
    is Accessible

    View Slide

  19. View Slide

  20. http://motherfuckingwebsite.com

    View Slide

  21. #UseThePlatform






    View Slide

  22. Using a

    Open Modal

    View Slide

  23. What you get for free
    • Focusable via the keyboard or screen reader
    • Clickable by mouse, enter key and space bar
    • Accessible name and state provided to assistive tech
    • An interaction is expected when clicked

    View Slide

  24. View Slide

  25. Using a

    Open Modal

    View Slide

  26. Extra Work
    tabindex=“0”
    role=“button”
    onKeyPress=“handleBtnKeyPress(e)”
    onClick=“openModal(e)”>
    Open Modal

    View Slide

  27. More Extra Work
    function handleBtnKeyPress(e) {
    // Check to see if space or enter were pressed
    if ( e.keyCode === 32 || e.keyCode === 13) {
    // Open modal dialog
    openModal(e);
    }
    }
    Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

    View Slide

  28. Even More Extra Work
    [role=“button”] {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    padding: 2px 6px 3px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    margin: 0em;
    font: 11px system-ui;
    -webkit-appearance: button;
    }

    View Slide

  29. View Slide

  30. – A Wise Person on Twitter
    “HTML is, by default, accessible. As developers, it is
    our job to not fuck that up.”

    View Slide

  31. 3. The web is for everyone

    View Slide

  32. View Slide

  33. http://www.euractiv.com/section/digital/opinion/web-
    accessibility-will-now-be-the-law-of-the-land-in-europe/

    View Slide

  34. – Dita Charanzová
    “This is a victory not only for persons with
    disabilities, but all of us”

    View Slide

  35. 4. It doesn’t have to be hard

    View Slide


  36. Open Modal


    Open Modal

    Accessible vs Inaccessible

    View Slide

  37. How Do I Get Started
    With Accessibility?

    View Slide

  38. View Slide

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

    View Slide

  40. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies

    View Slide

  41. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies

    View Slide

  42. alt=“Ire Aderinokun
    Illustration”>
    Text Alternatives

    View Slide

  43. Contrast Ratio
    http://leaverou.github.io/contrast-ratio

    View Slide

  44. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies

    View Slide

  45. Keyboard Accessible

    View Slide

  46. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies

    View Slide

  47. Specify Language

    View Slide

  48. Provide Instructions

    View Slide

  49. Perceivable
    Information and user interface
    components must be presentable to
    users in ways they can perceive
    Operable
    User interface components and
    navigation must be operable
    Understandable
    Information and the operation of user
    interface must be understandable
    Robust
    Content must be robust enough
    that it can be interpreted reliably
    by a wide variety of user agents,
    including assistive technologies

    View Slide

  50. Write Valid Code




    My Web Page


    My Web Page


    View Slide

  51. Label Elements

    Username

    type=“text”>

    X

    View Slide

  52. View Slide

  53. Lighthouse

    View Slide

  54. Chrome Developer Tools > Audits > Perform an Audit

    View Slide

  55. pa11y

    View Slide

  56. View Slide

  57. On-the-Fly
    Accessibility Testing

    View Slide

  58. npm install -g pa11y
    pa11y example.com

    View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  65. Continuous Integration

    View Slide

  66. View Slide

  67. View Slide

  68. npm install -g pa11y-ci
    pa11y-ci

    View Slide

  69. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to [email protected]”,
    “click element #subscribe”,
    ]
    }
    }
    .pa11yci

    View Slide

  70. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to [email protected]”,
    “click element #subscribe”,
    ]
    }
    }

    View Slide

  71. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to [email protected]”,
    “click element #subscribe”,
    ]
    }
    }

    View Slide

  72. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to [email protected]”,
    “click element #subscribe”,
    ]
    }
    }

    View Slide

  73. {
    "urls": [
    “https://bitsofco.de”,
    ],
    "defaults": {
    "hideElements": “.sr-only”,
    “ignore”: [
    “notice”,
    “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA”
    ],
    “actions”: [
    “set field #email to [email protected]”,
    “click element #subscribe”,
    ]
    }
    }

    View Slide

  74. pa11y-ci

    View Slide

  75. pa11y-ci --threshold 50

    View Slide

  76. https://bitsofco.de/pa11y
    https://github.com/ireade/bitsofcode-pa11y

    View Slide

  77. Chrome Extensions

    View Slide

  78. Alix
    https://github.com/ireade/alix

    View Slide

  79. View Slide

  80. Accessibility Developer Tools
    https://chrome.google.com/webstore/detail/
    accessibility-developer-t/
    fpkknkljclfencbdbgkenhalefipecmb

    View Slide

  81. Inspect Element > Accessibility Properties

    View Slide

  82. Inspect Element > Accessibility Properties

    View Slide

  83. HTML5 Outliner
    https://chrome.google.com/webstore/detail/
    html5-outliner/
    afoibpobokebhgfnknfndkgemglggomo/
    reviews

    View Slide

  84. View Slide

  85. No Coffee
    https://accessgarage.wordpress.com/
    2013/02/09/458/

    View Slide

  86. View Slide

  87. User Research

    View Slide

  88. https://www.youtube.com/watch?v=d3VuWAdBq9g

    View Slide

  89. Test it Yourself!

    View Slide

  90. Go Keyboard-Only

    View Slide

  91. Try a Screen Reader

    View Slide

  92. System Preferences > Accessibility > VoiceOver > “Enable VoiceOver”

    View Slide

  93. https://www.chromevox.com

    View Slide

  94. Screen Reader Demo

    View Slide

  95. How Can I Make
    Accessibility Easy?

    View Slide

  96. View Slide

  97. Make Accessibility a
    First Class Citizen

    View Slide

  98. Make Accessibility
    Everyone’s Job

    View Slide

  99. http://accessibility.voxmedia.com

    View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. View Slide

  104. View Slide

  105. Accessibility is only
    hard when you do it
    last

    View Slide

  106. – Leonie Watson
    “Accessibility doesn't have to be perfect, it just
    needs to be a little bit better than yesterday.”

    View Slide

  107. Thank You!
    @IreAderinokun
    www.ireaderinokun.com

    View Slide