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 Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. Do a reactji at me

    if you or someone you know is:
    blind

    View Slide

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

    View Slide

  16. Do a reactji at me

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

    View Slide

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

    View Slide

  18. Do a reactji at me

    if you or someone you know is:
    colour blind

    View Slide

  19. Potential barrier
    !
    using only colour
    to convey information

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. Questions about
    accessibility standards?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. Tiny demo of QAC
    !

    View Slide

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

    View 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 Slide

  34. Tiny demo of Voice Over
    (Screen Reader)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  38. Thanks for your attention!
    More questions?
    !

    View Slide

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

    View Slide

  40. Appendix 1
    Quick A11y Checks

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. Appendix 2
    Slower A11y Checks

    View 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 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 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 Slide

  48. View Slide

  49. View Slide

  50. Super secret appendix 3!
    Automated testing

    View Slide

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

    View Slide

  52. 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 Slide

  53. 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 Slide

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

    View Slide










  55. View Slide

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

    View Slide








  57. here

    View Slide

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

    View Slide


  59. Address

    Settings




    View Slide


  60. Edit






    View Slide


  61. Edit

    Edit

    Edit

    View Slide