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
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.

Someone using a braille keyboard on a computer
Someone using a braille keyboard on a computer
Example of an assistive tool to use the computer

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.

All different components make a design system, this image shows a group of components from a designers perspective.
All different components make a design system, this image shows a group of components from a designers perspective.
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.

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:

Stark, a plugin for the design software Sketch, it shows different types of colorblindness
Stark, a plugin for the design software Sketch, it shows different types of colorblindness
Showing colorblind simulation of the Stark plugin in Sketch

Developers can manually test by doing QA and do code reviews to check the accessibility of a design system component or page template. For designers, there is also a chrome extension called Funkify which simulates certain imparities like dyslexia, visual impairment, and cognition, etc.

For designers & developers, there is a chrome extension that automatically checks base level accessibility issues called the aXe plugin, which will often find hierarchy issues.
You may also use the WAVE, a tool from WebAIM that scans websites and lists any violations it finds.
There is also a Google tool called Lighthouse, which is an automated tool to improve webpages, including accessibility issues.

Automated checkers are one way of assessing accessibility, but it’s important to consider that you will need to do testing with real people to understand whether an implementation is accessible to a particular user and their (assistive technology) needs.

Making an accessible design system requires a thorough understanding of accessibility within the design system team and, ideally, awareness in the (digital) organization that you’re a part of.

I have personally faced the challenges of being the single “accessibility expert” at a company. In short: it doesn’t work. Everyone that works on building digital products impacts accessibility, from developer to manager. Knowing that your actions and decisions can limit someone during their online experience is key, so in other words, if you’re the lone expert on accessibility, you’ll need to rectify that situation. This is where education and awareness building come in as fundamental aspects of embedding an accessibility mindset into your approach.

A screenshot of the website edX where you could follow the Introduction to Web Accessibility training
A screenshot of the website edX where you could follow the Introduction to Web Accessibility training
A screenshot of the edX website where you could do the course ‘Introduction to Web Accessibility’.

Education can be done formally or informally, but often end up being a mix of both. There are various formal ways to learn about accessibility such as W3C’s course ‘Introduction to Web Accessibility” at edX. Education on accessibility is also done at an informal peer-to-peer level. At every larger company I worked for there are at least some documented guidelines, such as the color palette, and I noticed that working side by side with people that have deep accessibility knowledge helps me and the whole team grow. So, it’s also a lot of ‘on-the-job’ education. For instance, when I see something going wrong, I’ll call it out and we’ll make sure the mistakes are fixed and we’ll make sure doesn’t happen again by adding the correct way to our way of working. That’s why design review sessions are very important.

If you aren’t willing to consider accessibility as part of your responsibility, it’s just not going to work, and quite frankly, you’re a bad designer.

How you can get started now

If you want to get in on accessible design, there is a very nice infographic about web accessibility for designers at WebAIM that you can use as a checklist while designing. When you’re looking for more specific do’s and don’ts, the UK Home Office made several posters about Designing for Accessibility. They have posters per type of disability such as people in the autistic spectrum, people who use screen readers, people with low vision, etc.

A list of do’s and don’ts for designing for users on the autistic spectrum.
A list of do’s and don’ts for designing for users on the autistic spectrum.
A list of do’s and don’ts for designing for users on the autistic spectrum

For developers, designers, and design systems teams that are looking to get started with an already accessible design system, make sure you check out the A11Y Style Guide. It comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your digital products more inclusive.

For design teams there is a website called Accessibility for Teams, this is a quick start guide for embedding accessibility and inclusive design practices into your team’s workflow.

If you’re looking for some reading material, I highly recommend the books Inclusive Components by Heydon Pickering and The End Of Average by Todd Rose to get you started.

In my eyes, accessibility shouldn’t be a separate ‘thing’ when designing. On the contrary, it should be part of the complete design process. As designers, we are in charge of the complete experience of our users, and that is including accessibility. If you aren’t willing to consider accessibility as part of your responsibility, it’s just not going to work, and quite frankly, you’re a bad designer.

Thankfully, nowadays, there is more recognition in the digital world that accessibility is essential for building successful products. The issue is sometimes even forced by law as is the case in the Netherlands. Nonetheless, design systems are slowly becoming more often the foundational structures in digital product design and development. Therefore, we have to ensure that all of them become accessible. For everyone.

Bootcamp

From idea to product, one pixel at a time.

Tim Scheffer

Written by

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Tim Scheffer

Written by

Bootcamp

Bootcamp

The best resources for designers starting in Design, UX, and UI. Bootcamp is a new product publication from the team behind the UX Collective (http://uxdesign.cc). To submit your story: hello@uxdesign.cc

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store