Design systems: the perfect opportunity for the integration of accessibility
By: Tim Scheffer
Tags: Resources, UX, Accessibility, WCAG, Design Systems

Design systems: the perfect opportunity for the integration of accessibility

Creating an application that meets the accessibility standards is tough, but we don’t have a choice anymore. It is our responsibility to make sure our products can be used by all users, not just morally, but often legally as well. Considering accessibility as part of your design system is a good starting point. How? Read on! Tim Scheffer Follow Nov 19, 2020 · 7 min read

15% of the world’s population experience some form of disability, according to the World Health Organization (WHO). This number grows every day as the global population ages. A lot of these people need to use assistive technology to navigate websites and other digital products and experience a clear mismatch between how they use their tools and how interfaces are designed. Recent studies found that less than 2% of homepages meet standard level AA WCAG 2.1 accessibility requirements, which is the general standard of web accessibility.

Assistive technology comes in many shapes and forms: screen readers that read an interface out aloud, zoom software that enlarges elements, or simply using only a keyboard to navigate instead of a mouse. The reasons for using them also vary wildly, ranging from efficiency or personal preference to mobility disabilities.

Design systems are the perfect opportunity to build accessibility and inclusion into your component libraries, both from a code repository perspective as well as from a UI/UX design perspective. Seeing accessibility as an integrated part of the process, rather than ‘something that we need to check’ when the project is at its end, is something that we’re seeing more and more of nowadays.

Example of an assistive tool to use the computer

Incorporating accessibility starts at the component level

When you want to incorporate accessibility into design systems there are two major considerations: usability and compatibility. We need to be able to provide for both in a design system.

Usability is not only the experience you have when you operate an interface to get a task done, but it’s also the flow of the application, and how you navigate and understand it as a user. Compatibility has to do with how the assistive tools interact with the interfaces and systems. This is outside the control of the users and can be limited by the operating system and/or the type of assistive tools they use. Usability and compatibility play out at several levels of the design system, but it all starts at the individual component level.

Example of components from a design system

However, it’s crucial to keep in mind that if individual components may have built-in accessibility, it doesn’t necessarily mean the user flows at the page level will be accessible. Designers and developers need to consider how components fit into layouts. Having a clear navigation structure and using semantic code helps, but it’s also important for designers and developers to have more context for when they use components. For example, if you have a set of forms, you need to have instructions about the descriptive header for each form. You need to have criteria related to the context you’re using the component in.

Testing and tools ensure success

To ensure that components and page-level flows are accessible, you’ll need to test them. There are three main ways of testing your work. First, you should do manual testing while you’re in the process of creating or developing components. Second, use automated testing, and third, which arguably is the most important, is testing with users.

There are several tools that designers and developers can use during their work for quick testing. Here are a few ways that enable designers to test while designing: