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

45ca9033757d209fabf1481740d1c936?s=128

Ire Aderinokun

November 27, 2017
Tweet

Transcript

  1. Web Accessibility: It doesn’t have to be hard World Usability

    Day Lagos, 2017
  2. Ire Aderinokun

  3. None
  4. None
  5. None
  6. Why is Accessibility Important?

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

  9. Who are you building your site for?

  10. “Abled” or “Disabled”?

  11. None
  12. ???

  13. None
  14. Temporary and Situational Disabilities

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

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

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

  19. None
  20. http://motherfuckingwebsite.com

  21. #UseThePlatform <header> <button> <main> <footer> <input type=“password”> <a>

  22. Using a <button> <button onClick=“openModal(e)”> Open Modal </button>

  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
  24. None
  25. Using a <div> <div onClick=“openModal(e)”> Open Modal </div>

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

  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
  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; }
  29. None
  30. – A Wise Person on Twitter “HTML is, by default,

    accessible. As developers, it is our job to not fuck that up.”
  31. 3. The web is for everyone

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

  34. – Dita Charanzová “This is a victory not only for

    persons with disabilities, but all of us”
  35. 4. It doesn’t have to be hard

  36. <button> Open Modal </button> <div> Open Modal </div> Accessible vs

    Inaccessible
  37. How Do I Get Started With Accessibility?

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

  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
  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
  42. <img src=“ire.png” alt=“Ire Aderinokun Illustration”> Text Alternatives

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

  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
  45. Keyboard Accessible

  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
  47. Specify Language <html lang=“en”>

  48. Provide Instructions

  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
  50. Write Valid Code <!doctype html> <html lang=“en”> <head> <meta charset=“UTF-8”>

    <title>My Web Page</title> </head> <body> <h1>My Web Page</h1> </body> </html>
  51. Label Elements <label for=“username”> Username </label> <input name=“username” id=“username” type=“text”>

    <button aria-label=“Cancel”> X </button>
  52. None
  53. Lighthouse

  54. Chrome Developer Tools > Audits > Perform an Audit

  55. pa11y

  56. None
  57. On-the-Fly Accessibility Testing

  58. npm install -g pa11y pa11y example.com

  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. Continuous Integration

  66. None
  67. None
  68. npm install -g pa11y-ci pa11y-ci

  69. { "urls": [ “https://bitsofco.de”, ], "defaults": { "hideElements": “.sr-only”, “ignore”:

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

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

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

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

    [ “notice”, “WCAG2AA.Principle1.Guideline1_4.1_4_6_AAA” ], “actions”: [ “set field #email to test@test.com”, “click element #subscribe”, ] } }
  74. pa11y-ci

  75. pa11y-ci --threshold 50

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

  77. Chrome Extensions

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

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

  81. Inspect Element > Accessibility Properties

  82. Inspect Element > Accessibility Properties

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

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

  86. None
  87. User Research

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

  89. Test it Yourself!

  90. Go Keyboard-Only

  91. Try a Screen Reader

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

  93. https://www.chromevox.com

  94. Screen Reader Demo

  95. How Can I Make Accessibility Easy?

  96. None
  97. Make Accessibility a First Class Citizen

  98. Make Accessibility Everyone’s Job

  99. http://accessibility.voxmedia.com

  100. None
  101. None
  102. None
  103. None
  104. None
  105. Accessibility is only hard when you do it last

  106. – Leonie Watson “Accessibility doesn't have to be perfect, it

    just needs to be a little bit better than yesterday.”
  107. Thank You! @IreAderinokun www.ireaderinokun.com