The link between accessibility and design systems

What makes good UX design?

Big question, mate. There are at least 700 ways to answer that, but I’d argue that good UX is always accessible. Good design is accessible design. Period.

It’s widely acknowledged that design systems help product teams work better and faster. We all know that accessibility is critical to the success of digital products. But how are design systems and accessibility intertwined?

In a recent report about the connection between accessibility and design systems, we shared six insights into how to design systems can advance accessibility practices, along with how to use design systems to move towards inclusive design.

Click here to download the report.

1. Design systems set the tone for your product’s accessibility

Defining and codifying accessibility standards in your design system sets a baseline for your product team. Products built using elements from that design system will be designed to reach higher standards, and your team as a whole will be more informed about what good (and great) accessible products look like.

2. Design systems streamline the transition from accessibility to inclusion

W3C’s accessibility guidelines aren’t the accessibility bible: they’re the baseline. Setting higher standards for your products within your design system will allow you to move from “this page must pass” towards an experience-first mindset. This includes guidelines for closed captioning, representation in images and illustrations, and gender inclusion.

3. Design systems only improve UX when they’re accessibility-focused

One of the many benefits of implementing a design system is improved UX across pages and platforms. Without taking the time to codify accessibility standards for content, design, and development, including usability testing, your design system won’t reap those rewards.

Click here to download the report.

4. Design systems are good business. Same with accessibility. 

Setting high standards for your product’s accessibility isn’t just good UX—it’s good business. In 2020, 2,523 lawsuits were filed against businesses violating digital accessibility practices—including those using accessibility overlays. For your products to be fully accessible, they need to be built with accessibility at the forefront, and not as an afterthought.

5. Design systems keep accessibility consistent

For complex products and multi-page websites, it’s rare practice to test every page and screen. Less than 1% of website homepages meet basic accessibility standards; for inner pages and neglected screens, the number is (somehow) lower. When accessibility and testing standards are codified, however, inconsistencies and accessibility violations are much less of a problem. Building digital products with accessibility-focused design systems makes testing easier, and the results more favorable.

6. Design systems make it easy to do the right thing

The magic of design systems is in its constraints: when you don’t have to spend energy thinking about colors and font sizes, you can focus on improving experiences. This is applicable to accessibility, too; when you know the components you’re working with are accessible, you can focus on building inclusive, user-focused experiences.

What is inclusion in digital products?

Inclusive design takes accessibility a step further to build products that are not only usable by all, but user-friendly to all. This includes:

  • Diverse representation in illustrations and images 
  • Inclusive language in forms
  • Customizable accessibility settings
  • Recruiting diverse groups for user testing

Use your design system to do the right thing

Design systems don’t need to stop at the products you’ve already built; their guidelines should include how to build something that isn’t supported by the system today. 

By adopting the highest accessibility standards and inclusion guidelines and codifying them in your design system, you’ll guarantee an accessible, inclusive 

product culture for all products to come.

Click here to download the report.

Get started

See how Knapsack helps you reach your design system goals.

Get started

See how Knapsack makes design system management easy.