1 of 44

Build Design Systems So Good (and Accessible) They Can’t Ignore You

Bridget Burke

Global Accessibility Awareness Day 2025

2 of 44

Hello! I’m Bridget

  • Sr. Front-end Developer & Accessibility Specialist, CPWA
  • 10 years at the University of Michigan
  • Making things on the web since the 90’s.
  • I design and build websites
  • Lead of the U-M Library Design System

3 of 44

Accessibility is a shared responsibility

Three core beliefs:

  1. We have built inaccessible environments.
  2. We want to be better.
  3. We have to do the work.

4 of 44

“Against Technoableism:

Rethinking Who Needs

Improvement”

Disability is not a problem to be solved.

5 of 44

  1. Our inaccessible environments

Our society creates barriers for individuals: physical, digital, organizational.

We put out so much digital content and we are not making it accessible.

6 of 44

We don’t know what we don’t know. Yet.

7 of 44

2. People want to do the right thing

Then why are we making inaccessible content?

  • Time
  • Whelm
  • Training

8 of 44

3. We have to do the work

There is no all-in-one package, AI, technology, system, or software that will do it all for us.

When we don’t do the work, we end up with overlays, widgets, div and ARIA soup, etc…

9 of 44

One solution: build a good design system

Design systems, as we know them in user interface design and development, emerged around 2015.

We use design systems for consistency, efficiency, and collaboration.

10 of 44

What is a design system?

A design system is a collection of reusable components, guidelines, and assets.

A good design system ensures the collection is built with accessibility and inclusive design as guiding values and principles.

11 of 44

How can they help with time?

  • Time
  • Whelm
  • Training

Design systems save people time.

12 of 44

How can they help with whelm?

  • Time
  • Whelm
  • Training

Design systems have built in processes for following standards and best practices.

13 of 44

Guardrails and guiderails

Guardrails keep us within our boundaries and adhering to values, principles and standards (WCAG, standard practice guides, ADA…).

Guiderails are procedures and processes we define to set expectations and support and guide users.

14 of 44

How can they help with training?

  • Time
  • Whelm
  • Training

Design systems provide guidelines and documentation for using resources; Team members provide training

15 of 44

A design system is a foundation

A design system is not an all-one-solution.

But a good design systems provides the foundation for creating usable and accessible digital products.

16 of 44

The U-M Library Design System

17 of 44

Why we formed

  • Started in 2017 with 2 people
  • A call to action
  • Frustrated with:
    • Searching for resources
    • Creating the same things
    • Inconsistency in our visual language

18 of 44

U-M Library Design System Team

  • In 2025, we have 8 people on the team
  • A very mature, complex system
  • Central model for contribution
  • Cross-functional team
  • Supported by our organization

19 of 44

How we support the U-M Library

  • Team
  • Service
  • Resources

20 of 44

Design System: Team

  • The team offers individual professional development and the ability to learn new processes, technologies.
  • Team members are embedded in projects and share the design system

21 of 44

Design System: Service

  • Office Hours and a Slack channel
  • Consultations in and outside of our organization
  • Building custom solutions when needed

22 of 44

Design System: Resources

Our shared resources have had the most impact on creating accessible digital content and applications.

This is how we support our colleagues.

23 of 44

Our shared resources

24 of 44

Design System: Visual Elements

  • Logos
  • Typography
  • Brand colors
  • Icons
  • Images

25 of 44

Figma UI Kit

26 of 44

Design System: Content

  • Voice and Tone
  • Writing for People
  • Writing About People
  • Word List
  • Grammar and Style

27 of 44

Design System:

Templates & themes

  • Google Slides
  • Google Docs
  • Google Sites
  • Qualtrics
  • LibWizard, LibGuides
  • Drupal

28 of 44

Design System: Reusable Designs

  • CSS package (files)
  • Design tokens
  • HTML elements & web components
  • CodePen

29 of 44

Documentation site

30 of 44

How we design accessible resources

31 of 44

Our design process

We use a human-centered approach to problem-solving that involves understanding the needs of users, generating ideas, prototyping solutions, and testing them iteratively.

Accessibility must be built into every step of the process.

32 of 44

Test your system

We test our visual elements and components every step in the design process.

We test our components within our products. We use diverse users when possible but most of testing is done by non-native AT users.

33 of 44

The process of making a reusable design

34 of 44

So many buttons

35 of 44

Checklists in the process

Design

    • Button type
    • Icon/no icon
    • Touch target
    • Design for states
    • Contrast

Code

  • Start with HTML elements
  • Icon decorative

Content

  • Guidelines for types
  • When to use a button/when to use a link
  • Button text

36 of 44

Button

37 of 44

How to build your design system

  • Build your team
  • Create what “you” need
  • Prove the value and impact

38 of 44

Build your team & values

  • It may be just you.
  • Find other people with various skills and shared problems
  • Ask for time, resources, training
  • Define your principles

39 of 44

Create what “you” need

  • Start small and simple
  • Know your users
  • Collect all the components together in one place
  • Consider what your org uses and needs
  • Document it in a place people can find it

40 of 44

No gatekeeping and don’t be afraid

Your design system can be whatever you need it to be.

You will make mistakes. Learn and iterate.

41 of 44

Prove the value and impact

  • The hardest part about design system work is getting people to use your design system.
  • Build trust and build what people need.
  • When they see the value, “they” won’t ignore you

42 of 44

Impact Spotlight: Slide Themes

  • We have three Slides themes (white, neutral, dark) to accommodate various needs.
  • Provided training to the Library

43 of 44

Accessible slide deck checklist

44 of 44