Create an accessible design system

Many organizations recognize the importance of adding accessibility to the UX of their products. According to the United Nations website, 15 percent of the world’s population (about 1 billion people) have a disability. When your company prioritizes accessibility, it benefits everyone.

One of the ways to get started on making your products accessible is to build accessible affordances into your design system. When you’ve created accessible components and pattern libraries, you can scale up your user flows and web pages to be more accessible. Discover how you can make an accessible design system.

If you’re unfamiliar with accessibility, here’s a quick overview.

Accessibility for web and digital products ensures people with impairments have alternative equivalents or solutions. These alternative equivalents can enable people with impairments to complete tasks such as making an online purchase.

Impairments can be situational, temporary, or permanent, such as:

Vision (e.g., color blindness, partial vision loss, and complete blindness)—affects people’s ability to read text or see images.

Hearing (e.g., total hearing loss or partial deafness)—affects people’s ability to hear audio or video files.

Motor skills (e.g., broken arm, arthritis, or missing limbs)—affects people’s ability to navigate a website due to limited mobility.

Cognition (e.g., traumatic brain injury or neurodiversity)—affects people’s ability to process the information on a website.

Learning about accessibility can be daunting because you may feel expected to quickly become an expert on it or get it right for your users. To help you start learning, our Design Advocate Michelle wrote an article about easily learning accessibility.

Building accessible affordances into your design system have multiple benefits. Accessibility within the design system enables your team to:

make consistent components and experiences for people with impairments

create more efficiency within the team to scale faster

improves the usability for everyone using your product

enables all product teams to take steps toward providing an accessible user experience across platforms and products

There’s no downside to embedding accessibility into the design system. Implementing it throughout the design system will help your team improve the user experience of your products for your users.

The first step is getting alignment on what accessibility means to everyone on the team. If the company decides to make its products accessible, it dictates that accessibility extends into the design system. Bonus points if you try incorporating this value in your design principles or creating an Accessibility section in your design system documentation to convey this message.

We recommend auditing your components to understand how accessible they are currently. An audit will help your team prioritize which components to focus on and whom to delegate responsibility to.

When vetting your components, some questions to answer are:

Is there enough color contrast?

Can someone distinguish a visual cue beyond the color?

How would someone navigate using only a keyboard or only a mouse?

Is there alt text for the component? If so, what is it?

Can users understand the information? Including:

You can use our checklist to assess your components.

Accessibility is a shared responsibility between both designers and developers. In Myth #3, in her article on the myths of accessibility in design systems, Michelle wrote, “creating accessible solutions are usually part design and part implementation.” Designer/developer collaboration is key to ensuring accessibility in your design system.

To help designers and developers learn, you can take accessibility training together. There are courses and consultants you can find online. After learning about accessibility, your designers and developers can apply what they learned and collaborate on making complex components accessible. There may be a lot of trial and error, but coming to the right solution can be a learning experience for everyone.

Once the component is determined accessible, designers and developers can document the solution together. Collaboration ensures that the accessibility of the design and implementation are both established in the design system.

If you started working on making your design system accessible, congrats on taking the first step! Once you’ve established accessibility in your design system, you must test the components in your product to ensure they’re accessible in implementation. You can use automated tools to check baseline things like color contrast, but they only go so far. You need to manually test with and get feedback from real people with impairments to ensure accessibility. Once you get feedback, you can iterate to improve your design system. Our Design Advocate, Dan wrote about improving your design system's accessibility.

It’s crucial to monitor evolving accessibility standards to ensure your design system meets current guidelines. You can review Web Content Accessibility Guidelines (WCAG) to stay up to date on accessibility standards for the web.

In addition to vetting and making your components accessible, documenting their accessibility is crucial. Even if the element is accessible, someone could deploy it incorrectly in your product, and the interaction or screen is no longer accessible. Documentation informs designers and developers how to implement components, patterns, and flows in the product to ensure they’re accessible when used.

Your documentation should include (but is not limited to) the following:

accessible color combinations and ratios (use our Rules block to show acceptable combinations)

information on how components and their interactions meet WCAG accessibility guidelines

information on specific code to use for accessible accommodations (e.g., ARIA attributes)(consider adding this information to your anatomy diagrams)

the context for how screen readers process information

keyboard navigation and tab order for pages and components

guidelines and alt text for images and videos (you can add captions in the Image block and Rules block)

guidelines for page structure and hierarchy of content

While having an accessible design system doesn’t happen overnight, it’s never too late to start now. Many put pressure on making every aspect of the design system immediately accessible when the solutions aren’t always straightforward. Working towards an accessible design system and an inclusive user experience takes effort, but you learn new skills and allow your product to be used by a wider audience!