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

How to get the most (accessibility) out of a de...

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. Lego: Make the thing with bricks and instructions; Check the

    thing against the picture; Improve the product with feedback.
  2. Design system: Make the thing with components and documentation; Check

    the thing against examples; Improve the system with feedback.
  3. Agenda 1. a11y going forwards (make) 2. a11y going backwards

    (check) 3. a11y going onwards (improve)
  4. Make with a design system: use the right components Use

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

    place Put groups in helpful containers Be careful with nesting
  6. Make with a design system: follow the documentation Help on

    good button and link text Prefer labels over aria-labels
  7. Agenda 1. a11y going forwards (make) ✔ 2. a11y going

    backwards (check) 3. a11y going onwards (improve)
  8. Check with a design system: compare to the examples Check

    our accessible names, roles Run an automated test (good for errors and omissions)
  9. Check with Lego: find where the problem is The bricks?

    The instructions? We decided not to make a duck?
  10. Check with a design system: find where the problem is

    A bug in the design system? Our usage of the design system? Our implementation?
  11. Agenda 1. a11y going forwards (make) ✔ 2. a11y going

    backwards (check) ✔ 3. a11y going onwards (improve)
  12. Improve with a design system: give feedback on the components

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

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

    Let them know what was most helpful, what could be expanded on
  15. Recap 1. a11y going forwards (make) ✔ 2. a11y going

    backwards (check) ✔ 3. a11y going onwards (improve) ✔