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.

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)
   

   View Slide

2. View Slide

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.
   

   View Slide

4. Be respectful of each other.
   

   View Slide

5. Introduction to accessibility
   By: Steve Barnett
   

   View Slide

6. Steve Barnett
   He/him
   Technical Digital Accessibility Analyst
   Also: sketcher, mixer, gamer.
   naga.co.za
   Most-used emoji: 🙈
   About the speaker
   

   View Slide

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.
   

   View Slide

8. Introduction to accessibility
   (a11y for short)
   

   View Slide

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

   View Slide

10. “
    IMAGE GOES
    OVER HERE
    The power of the Web
    is in its universality.
    Access by everyone
    regardless of disability
    is an essential aspect.
    

    View Slide

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
    

    View Slide

12. A human
    uses the Web
    

    View Slide

13. A human
    with a mouse and Safari on a Mac
    uses the Web
    

    View Slide

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
    

    View Slide

15. Delicious takeaway 😋
    Humans use the web
    in a very wide range of ways
    

    View Slide

16. There are many types of disability,
    for example
    Auditory
    Cognitive
    Physical
    Visual
    

    View Slide

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
    

    View Slide

18. (Gentle!) activity 🤔
    Let's think about the visual category
    under the social model of disability
    

    View Slide

19. Do the raise hand thing ✋
    if you or someone you know is:
    blind
    

    View Slide

20. Potential barrier 🚧
    No text alternatives for non-text content
    (images, video)
    

    View Slide

21. Do the raise hand thing ✋
    if you or someone you know has:
    low vision or poor eyesight
    (perhaps from old age)
    

    View Slide

22. Potential barrier 🚧
    No (or bad) responsive styles
    

    View Slide

23. Do the raise hand thing ✋
    if you or someone you know is:
    colour blind
    

    View Slide

24. Potential barrier 🚧
    Using only colour to convey information
    

    View Slide

25. Do the raise hand thing ✋
    if you or someone you know has:
    been outside on a sunny day
    with a shiny screen
    

    View Slide

26. Potential barrier 🚧
    Low colour contrast between
    the text and the background
    

    View Slide

27. Delicious takeaway 😋
    Mismatched interactions can create
    barriers to access for many people
    

    View Slide

28. Questions about
    humans using the web,
    the social model of disability?
    🙋
    

    View Slide

29. 1. Accessibility and Disability ✔
    2. Standards and Compliance 👈
    3. Checks and Tests
    Agenda
    

    View Slide

30. Standards
    Tell us what good looks like
    Compliance
    Tells us if weʼre meeting the standard
    

    View Slide

31. Web Content Accessibility Guidelines
    (WCAG)
    A list of Success Criteria
    grouped by four Principles:
    Perceivable, Operable, Understandable,
    Robust
    

    View Slide

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.
    

    View Slide

33. Most governments, big companies aim for
    WCAG 2.1 Level AA compliance
    Meet all Level A and AA Success Criteria
    

    View Slide

34. Delicious takeaway 😋
    Standards and Compliance set the minimum
    We set the maximum
    

    View Slide

35. Questions about
    WCAG,
    POUR,
    Standards,
    Compliance?
    🙋
    

    View Slide

36. 1. Accessibility and Disability ✔
    2. Standards and Compliance ✔
    3. Checks and Tests 👈
    Agenda
    

    View Slide

37. Checks and Tests
    How do we check if itʼs accessible?
    What are the first few steps?
    

    View Slide

38. QAC (Quick A11y Checks) 🦆
    1. Headings (semantics, nesting)
    2. Keyboard (functionality, visibility)
    3. axe DevTools (errors, omissions)
    

    View Slide

39. Tiny demo of QAC
    💁 🦆
    

    View Slide

40. Questions about
    the QAC?
    🙋
    

    View Slide

41. 1. Accessibility and Disability ✔
    2. Standards and Compliance ✔
    3. Checks and Tests ✔
    Recap
    

    View Slide

42. “
    IMAGE GOES
    OVER HERE
    It doesn't have to be
    perfect, just a little bit
    better than yesterday
    - Léonie Watson
    

    View Slide

43. Most important thing
    Small accessibility improvements
    help more people than we might think
    

    View Slide

44. Any Questions?
    

    View Slide

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
    

    View Slide

46. We are hiring!
    https://jobs.lever.co/xero
    

    View Slide