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

How to get the most (accessibility) out of a design system

How to get the most (accessibility) out of a design system

A good design system helps nudge us towards more accessible choices. How firm that nudge is depends on the component(s), the flexibility of the system, and more.

We’ll ask:

- how do make sure we build an accessible thing? (a11y going forwards)
- how do we check we’ve built an accessible thing? (a11y going backwards)
- how do we help improve the design system? (a11y going more backwards but/and forwards. Uh.. onwards?)

Steve Barnett

May 17, 2022
Tweet

More Decks by Steve Barnett

Other Decks in Technology

Transcript

  1. How to get the most (accessibility)
    out of a design system

    View full-size slide

  2. Most important thing
    Be careful how we
    put the pieces together

    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. Caution
    Flawed and overused
    analogy is approaching

    View full-size slide

  5. A design system
    is a bit like
    a box of Lego

    View full-size slide

  6. Lego:
    Make the thing with
    bricks and instructions;
    Check the thing against the picture;
    Improve the product with feedback.

    View full-size slide

  7. Design system:
    Make the thing with components and
    documentation;
    Check the thing against examples;
    Improve the system with feedback.

    View full-size slide

  8. Agenda
    1. a11y going forwards (make)
    2. a11y going backwards (check)
    3. a11y going onwards (improve)

    View full-size slide

  9. Make with Lego:
    use the right bricks
    in the right place

    View full-size slide

  10. Make with a design system:
    use the right components
    Use semantic elements:
    buttons for actions, links for
    navigation, form elements for data

    View full-size slide

  11. Make with a design system:
    use components in the right place
    Put groups in helpful containers
    Be careful with nesting

    View full-size slide

  12. Make with Lego:
    follow the instructions

    View full-size slide

  13. Make with a design system:
    follow the documentation
    Help on good button and link text
    Prefer labels over aria-labels

    View full-size slide

  14. Agenda
    1. a11y going forwards (make) ✔
    2. a11y going backwards (check)
    3. a11y going onwards (improve)

    View full-size slide

  15. Check with Lego:
    compare to the picture

    View full-size slide

  16. Check with a design system:
    compare to the examples
    Check our accessible names, roles
    Run an automated test
    (good for errors and omissions)

    View full-size slide

  17. Check with Lego:
    find where the problem is
    The bricks?
    The instructions?
    We decided not to make a duck?

    View full-size slide

  18. Check with a design system:
    find where the problem is
    A bug in the design system?
    Our usage of the design system?
    Our implementation?

    View full-size slide

  19. Agenda
    1. a11y going forwards (make) ✔
    2. a11y going backwards (check) ✔
    3. a11y going onwards (improve)

    View full-size slide

  20. Improve with Lego:
    contact Customer Service
    Broken or missing bricks
    Unclear instructions

    View full-size slide

  21. Improve with a design system:
    give feedback on the components
    Report any bugs we find
    Offer suggestions for fixes

    View full-size slide

  22. Improve with a design system:
    give feedback on using the
    components
    Say what was easy and what was hard
    Offer suggestions for improvements

    View full-size slide

  23. Improve with a design system:
    give feedback on the documentation
    Let them know what was most
    helpful, what could be expanded on

    View full-size slide

  24. Recap
    1. a11y going forwards (make) ✔
    2. a11y going backwards (check) ✔
    3. a11y going onwards (improve) ✔

    View full-size slide

  25. Most important thing
    Be careful how we
    put the pieces together

    View full-size slide

  26. Appendix 1
    What makes a good accessible name?

    View full-size slide

  27. Buttons do things
    A good accessible name tells us
    what happens when we use the
    button

    View full-size slide

  28. Links go places
    A good accessible name tells us
    where we go when we follow the link

    View full-size slide

  29. Inputs accept data
    A good accessible name tells us
    what data to enter

    View full-size slide

  30. Grouping combines form elements
    A good accessible name tells us
    the context for the choice

    View full-size slide

  31. Appendix 2
    What makes an accessible design
    system?

    View full-size slide

  32. Automated tests
    Unit tests and end-to-end tests
    relating to accessibility

    View full-size slide

  33. Manual tests
    Keyboard support, Assistive
    Technology (like screen readers) that
    the team have tested with

    View full-size slide

  34. Standards
    The documentation talks about WCAG,
    what version and level the design
    system meets

    View full-size slide

  35. Inclusive
    People with Disabilities were
    involved in research, design,
    development, and testing

    View full-size slide

  36. Process
    A backlog of prioritised a11y issues
    Ideally a roadmap for fixing them

    View full-size slide