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

  2. 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
  3. 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
  4. 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; }
  5. – A Wise Person on Twitter “HTML is, by default,

    accessible. As developers, it is our job to not fuck that up.”
  6. – Dita Charanzová “This is a victory not only for

    persons with disabilities, but all of us”
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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>
  13. { "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
  14. { "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”, ] } }
  15. { "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”, ] } }
  16. { "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”, ] } }
  17. { "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”, ] } }
  18. – Leonie Watson “Accessibility doesn't have to be perfect, it

    just needs to be a little bit better than yesterday.”