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
Tweet

More Decks by Steve Barnett

Other Decks in Technology

Transcript

  1. Introduction to Accessibility
    (a11y for short)

    View full-size slide

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

    View full-size slide

  3. Steve Barnett
    Currently: Technical Digital
    Accessibility Analyst at Xero
    Previously: FEDUX at Totara
    naga.co.za

    View full-size slide

  4. Agenda
    1. Accessibility and Disability
    2. Standards and Compliance
    3. Checks and Tests

    View full-size slide

  5. “The power of the Web is in its
    universality. Access by everyone
    regardless of disability is an
    essential aspect.”
    — Tim Berners-Lee

    View full-size slide

  6. Agenda
    1. Accessibility and Disability
    2. Standards and Compliance
    3. Checks and Tests

    View full-size slide

  7. (Gentle!) activity
    A human uses the Web

    View full-size slide

  8. A human
    using a mouse and Safari on a Mac
    uses the Web

    View full-size slide

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

    View full-size slide

  10. Delicious takeaway:
    Humans interact with our product in a
    very wide range of ways
    Any questions?

    View full-size slide

  11. Many types of disability, for example:
    Auditory
    Cognitive
    Physical
    Visual

    View full-size slide

  12. Social model of disability
    Disability = Ability + Barrier
    Mismatched interactions

    View full-size slide

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

    View full-size slide

  14. Do a reactji at me

    if you or someone you know is:
    blind

    View full-size slide

  15. Potential barrier
    !
    no text alternatives
    for non-text content

    View full-size slide

  16. Do a reactji at me

    if you or someone you know has:
    low vision or poor eyesight
    (perhaps from old age)

    View full-size slide

  17. Potential barrier
    !
    no (or poor) responsive styles

    View full-size slide

  18. Do a reactji at me

    if you or someone you know is:
    colour blind

    View full-size slide

  19. Potential barrier
    !
    using only colour
    to convey information

    View full-size slide

  20. Do a reactji at me

    if you or someone you know has:
    been outside on a sunny day
    with a shiny screen

    View full-size slide

  21. Potential barrier
    !
    low colour contrast between
    text and the background

    View full-size slide

  22. Delicious takeaway:
    Mismatched interactions can create
    barriers to access for many people
    Any questions?

    View full-size slide

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

    View full-size slide

  24. Standards and Compliance
    How do we know what
    good looks like?

    View full-size slide

  25. Web Content Accessibility Guidelines
    Perceivable, Operable,
    Understandable, Robust
    How to Meet WCAG (Quick Reference)

    View full-size slide

  26. Most governments, big companies:
    "WCAG 2.1 Level AA compliance"
    This sets the minimum
    We set the maximum

    View full-size slide

  27. Questions about
    accessibility standards?

    View full-size slide

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

    View full-size slide

  29. Checks and Tests
    How do make accessible things?
    What are the first few steps?

    View full-size slide

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

    View full-size slide

  31. Tiny demo of QAC
    !

    View full-size slide

  32. Questions about QAC?
    (Three flavours of QAC are in the
    appendix: Content creator, Designer,
    and Developer)

    View full-size slide

  33. 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)

    View full-size slide

  34. Tiny demo of Voice Over
    (Screen Reader)

    View full-size slide

  35. "It doesn't have to be perfect,
    just a little bit better
    than yesterday"
    — Léonie Watson

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Thanks for your attention!
    More questions?
    !

    View full-size slide

  39. Links
    WCAG Quick Reference
    ARC toolkit, Microsoft Accessibility Insights
    Testing with screen readers
    QAC for Developers
    QAC for Designers

    View full-size slide

  40. Appendix 1
    Quick A11y Checks

    View full-size slide

  41. QAC for Content creators
    1. Headings (levels, nesting)
    2. Text alternatives (images, videos)
    3. High quality text (links, buttons)

    View full-size slide

  42. QAC for Designers
    1. Headings (levels, nesting)
    2. Accessible names (forms, links)
    3. Unique text (links, buttons)

    View full-size slide

  43. QAC for Developers
    1. Headings (levels, nesting)
    2. Keyboard (functionality, visibility)
    3. axe DevTools (HTML errors)

    View full-size slide

  44. Appendix 2
    Slower A11y Checks

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 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.
    !
    )

    View full-size slide

  48. Super secret appendix 3!
    Automated testing

    View full-size slide

  49. The thing to search for is axe.
    Industry-leading testing engine, made
    by Deque, used inside lots of other
    tools.

    View full-size slide

  50. 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
    !

    View full-size slide

  51. Automated testing can pick up some
    of the common, obvious, issues.
    But it misses some stuff too.
    Let's look at some
    accessibility examples.

    View full-size slide

  52. Does an automated test catch it?
    ✔ Missing alternative text for images
    ✖ Bad alternative for images

    View full-size slide

  53. Does an automated test catch it?
    ✔ Empty links or empty buttons
    ✖ Bad link text or bad button text

    View full-size slide

  54. Does an automated test catch it?
    ✔ Some HTML errors
    ✖ Weird HTML

    View full-size slide


  55. Address

    Settings




    View full-size slide


  56. Edit

    Edit

    Edit

    View full-size slide