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

Introduction to accessibility

Introduction to accessibility

# About the talk:

Humans! We interact with products in a very wide range of ways. In this introduction to accessibility we’ll talk about:

- how small accessibility improvements help more people than we might think;
- what Web Accessibility Standards there are;
- which first few checks and tests we can take towards making our products more accessible;

# About the speaker:

Steve Barnett is a human-centered front-end developer and user experience designer. He works at Xero as a Technical Digital Accessibility Analyst where he helps designers and developers make things ever more usable and accessible.

28a7165396905ffabc4d1f45609efc39?s=128

Steve Barnett

April 27, 2022
Tweet

More Decks by Steve Barnett

Other Decks in Technology

Transcript

  1. Kia ora Talk starts at 5:30pm Please put yourself on

    mute Please type your questions into the chat (instead of using the raise hand option)
  2. None
  3. Disclaimer The purpose of these talks is to share knowledge,

    learnings and stories with the wider technology community. This presentation relates solely to the individual presenting and does not reflect the opinion or analysis of Xero.
  4. Be respectful of each other.

  5. Introduction to accessibility By: Steve Barnett

  6. Steve Barnett He/him Technical Digital Accessibility Analyst Also: sketcher, mixer,

    gamer. naga.co.za Most-used emoji: 🙈 About the speaker
  7. Disclaimer . The purpose of these talks is to share

    knowledge, learnings and stories with the wider technology community. This presentation relates solely to the individual presenting and does not reflect the opinion or analysis of Xero.
  8. Introduction to accessibility (a11y for short)

  9. Most important thing Small accessibility improvements help more people than

    we might think
  10. “ IMAGE GOES OVER HERE The power of the Web

    is in its universality. Access by everyone regardless of disability is an essential aspect.
  11. 1. Accessibility and Disability 👈 2. Standards and Compliance 3.

    Checks and Tests Agenda Weʼll have tiny question breaks throughout, as well as Q&A at the end
  12. A human uses the Web

  13. A human with a mouse and Safari on a Mac

    uses the Web
  14. A human with a mouse / trackpad / keyboard /

    switch control / puffer / magnification tool / voice control / screen reader and Safari / Chrome / Firefox / Edge on a Windows / Mac / Linux / iOS / Android on a desktop / laptop / tablet / phone in light / dark / high contrast mode with reduced motion enabled with smaller / larger text size uses the Web
  15. Delicious takeaway 😋 Humans use the web in a very

    wide range of ways
  16. There are many types of disability, for example Auditory Cognitive

    Physical Visual
  17. Social model of disability Disability = Ability + Barrier Itʼs

    about mismatched interactions between the human and the world, between the human and the web
  18. (Gentle!) activity 🤔 Let's think about the visual category under

    the social model of disability
  19. Do the raise hand thing ✋ if you or someone

    you know is: blind
  20. Potential barrier 🚧 No text alternatives for non-text content (images,

    video)
  21. Do the raise hand thing ✋ if you or someone

    you know has: low vision or poor eyesight (perhaps from old age)
  22. Potential barrier 🚧 No (or bad) responsive styles

  23. Do the raise hand thing ✋ if you or someone

    you know is: colour blind
  24. Potential barrier 🚧 Using only colour to convey information

  25. Do the raise hand thing ✋ if you or someone

    you know has: been outside on a sunny day with a shiny screen
  26. Potential barrier 🚧 Low colour contrast between the text and

    the background
  27. Delicious takeaway 😋 Mismatched interactions can create barriers to access

    for many people
  28. Questions about humans using the web, the social model of

    disability? 🙋
  29. 1. Accessibility and Disability ✔ 2. Standards and Compliance 👈

    3. Checks and Tests Agenda
  30. Standards Tell us what good looks like Compliance Tells us

    if weʼre meeting the standard
  31. Web Content Accessibility Guidelines (WCAG) A list of Success Criteria

    grouped by four Principles: Perceivable, Operable, Understandable, Robust
  32. Level A is minimum compliance. Probably some barriers. Level AA

    is acceptable compliance. No significant barriers. Level AAA is optimal compliance. Almost no barriers.
  33. Most governments, big companies aim for WCAG 2.1 Level AA

    compliance Meet all Level A and AA Success Criteria
  34. Delicious takeaway 😋 Standards and Compliance set the minimum We

    set the maximum
  35. Questions about WCAG, POUR, Standards, Compliance? 🙋

  36. 1. Accessibility and Disability ✔ 2. Standards and Compliance ✔

    3. Checks and Tests 👈 Agenda
  37. Checks and Tests How do we check if itʼs accessible?

    What are the first few steps?
  38. QAC (Quick A11y Checks) 🦆 1. Headings (semantics, nesting) 2.

    Keyboard (functionality, visibility) 3. axe DevTools (errors, omissions)
  39. Tiny demo of QAC 💁 🦆

  40. Questions about the QAC? 🙋

  41. 1. Accessibility and Disability ✔ 2. Standards and Compliance ✔

    3. Checks and Tests ✔ Recap
  42. “ IMAGE GOES OVER HERE It doesn't have to be

    perfect, just a little bit better than yesterday - Léonie Watson
  43. Most important thing Small accessibility improvements help more people than

    we might think
  44. Any Questions?

  45. QAC for Designers QAC for Developers WCAG Quick Reference More

    than a QAC QACs TPGi's ARC Toolkit Microsoft Accessibility Insights Test with screen readers Links
  46. We are hiring! https://jobs.lever.co/xero