Skip to content

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

Last week I was lucky enough to give a talk at the excellent A11y Bytes conference. I talked about accessibility and design systems.

Here’s the 9 and a half minute video of the talk and here are the slides of the talk on Speaker Deck. This post is a short, bullet-y, summary of the main points.

The most important thing to remember is that we need to be careful how we put the pieces (of the Design System) together. A Design System can’t give us accessibility “for free”, but it can nudge us (perhaps strongly) in the right direction.

We could say there are three parts to using a Design system:

  • Make the thing with components and documentation;
  • Check the thing against examples;
  • Improve the system with feedback.

Make

  • Use the right components.
    • Use semantic elements: buttons for actions, links for navigation, form elements for data.
  • Use components in the right place.
    • Put groups in helpful containers.
    • Be careful with nesting.
  • Follow the documentation.
    • Help on good button and link text.
    • Prefer labels over aria-labels.

Check

  • Compare to the examples.
    • Check our accessible names, roles.
    • Run an automated test (good for errors and omissions).
  • Find where the problem is.
    • A bug in the design system?
    • Our usage of the design system?
    • Our implementation?

Improve

  • Give feedback on the components.
    • Report any bugs we find.
    • Offer suggestions for fixes.
  • Give feedback on using the components.
    • Say what was easy and what was hard.
    • Offer suggestions for improvements.
  • Give feedback on the documentation.
    • Let them know what was most helpful, what could be expanded on.