Introduction to accessibility

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

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