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

Introduction to accessibility

Introduction to accessibility

An interactive talk about accessibility, the social model of disability, standards (WCAG 2.1, Level AA), and checking and testing.

Steve Barnett

February 25, 2022

More Decks by Steve Barnett

Other Decks in Technology


  1. “The power of the Web is in its universality. Access

    by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee
  2. A human using a mouse / trackpad / keyboard /

    switch control / puffer / magnification tool / voice control / screen reader and Safari / Chrome / Firefox / Edge on a Windows / Mac / Linux desktop / laptop / tablet / phone in light / dark mode / high contrast mode with reduced motion enabled with smaller / larger text size uses the Web
  3. Do a reactji at me ✋ if you or someone

    you know has: low vision or poor eyesight (perhaps from old age)
  4. Do a reactji at me ✋ if you or someone

    you know is: colour blind
  5. Do a reactji at me ✋ if you or someone

    you know has: been outside on a sunny day with a shiny screen
  6. QAC (Quick A11y Checks) 1. Headings (levels, nesting) 2. Keyboard

    (functionality, visibility) 3. axe DevTools (errors, omissions)
  7. Questions about QAC? (Three flavours of QAC are in the

    appendix: Content creator, Designer, and Developer)
  8. More than a QAC TPGi's ARC Toolkit Microsoft Accessibility Insights

    Test using a screen reader (Links included later, plus more details in the appendix)
  9. "It doesn't have to be perfect, just a little bit

    better than yesterday" — Léonie Watson
  10. Links WCAG Quick Reference ARC toolkit, Microsoft Accessibility Insights Testing

    with screen readers QAC for Developers QAC for Designers
  11. QAC for Content creators 1. Headings (levels, nesting) 2. Text

    alternatives (images, videos) 3. High quality text (links, buttons)
  12. QAC for Designers 1. Headings (levels, nesting) 2. Accessible names

    (forms, links) 3. Unique text (links, buttons)
  13. TPGi's ARC Toolkit This is a good tool to run

    to flag more errors. It provides an easy way of inspecting the accessibility of semantic structures such as headings, landmarks, links, buttons, form controls, and alt text.
  14. Microsoft Accessibility Insights (Do the assessment option) This is a

    good tool to use next because it offers good coverage of the WCAG SC (Success Criteria). It’s a reasonably lengthy process, but gets faster with practice.
  15. Test using a screen reader Check structure. Check interactions. Check

    alt text of images: does it convey the content and function of the image? Check form error handling. (Warning! This could get a bit hairy. ! )
  16. The thing to search for is axe. Industry-leading testing engine,

    made by Deque, used inside lots of other tools.
  17. Deque has many axe-related repos. Check for an axe package

    for your favourite unit or E2E framework. However! Please read the next few slides too !
  18. Automated testing can pick up some of the common, obvious,

    issues. But it misses some stuff too. Let's look at some accessibility examples.
  19. Does an automated test catch it? ✔ Missing alternative text

    for images ✖ Bad alternative for images
  20. <!-- Missing alt text --> <!-- ✔ caught by automated

    test --> <img src="pup-pic-24.jpg"> <!-- Bad alt text: not actually a text alternative --> <!-- ✖ not caught by automated test --> <img src="pup-pic-24.jpg" alt="dog"> <!-- Great alt text: conveys the same information as the image --> <!-- passes automated test --> <img src="pup-pic-24.jpg" alt="Cute puppy frolicking in a field">
  21. Does an automated test catch it? ✔ Empty links or

    empty buttons ✖ Bad link text or bad button text
  22. <!-- Empty link text --> <!-- ✔ caught by automated

    test --> <a href="/edit/1/"> <img src="pencil.svg"> </a> <!-- Bad link text --> <!-- ✖ not caught by automated test --> <a href="/edit/1/">here</a>
  23. <!-- Button for an open accordion --> <button aria-expanded="true">Address</button> <!--

    Current page in the nav --> <a href="/settings" aria-current="page">Settings</a> <!-- An ARIA live region --> <!-- This has an implied aria-live="assertive" --> <div id="toasts" role="alert"></div> <!-- These usually need JS for the interaction -->
  24. <!-- Yes please! --> <button>Edit</button> <!-- Uh, yes, technically -->

    <button aria-label="Edit"></button> <!-- I suppose so --> <button aria-label="Edit"> <img src="pencil.svg"> </button>
  25. <!-- No thank you! --> <div>Edit</div> <!-- Better, but not

    there yet --> <div role="button">Edit</div> <!-- Better again, but just use a <button> instead! --> <div role="button" tabindex="0">Edit</div>