Here’s How Design Systems Support Accessibility

August 11, 2022 Karol Smyczyński

Obviously, Design Systems are very helpful. One of their main benefits is their ability to replicate designs quickly thanks to pre-made UI elements and components. As a result, design teams can continue to use the same parts multiple times, reducing the need to reinvent the wheel (and risking unintended inconsistency).

I don’t think I have to convince anyone that Design Systems ease the work of designers. (And if I have to, luckily we’ve written an article about the usefulness of Design Systems before).

So, in this text, I won’t list the standard benefits of Design Systems. No — instead, I’ll try to find an answer to the question of how Design Systems can support you in creating accessible interfaces.

 

 

Design Systems and Accessibility 

 

How Design Systems can Support Accessibility in Your Products 

 

In this article, I’ll focus on 3 main ways how a Design System can support your accessibility endeavours.

These ways are:

  • creating consistency,
  • introducing scalability,
  • and adding cost-effectiveness.

 

1. Consistency

 

Designing user interfaces in digital products is relatively straightforward.

 

Usually, designing UI includes the following steps:

– analyzing the competition, needs, assumptions and goals;

– learning about user needs and building personas;

– creating a product concept;

– developing user paths;

– drafting information architecture;

– creating mock-up;

– performing research with users;

– graphic design.

 

This roadmap is transparent and easy to follow. From the perspective of accessibility, however, it becomes less straightforward when a client decides to change something during the design or(and) development phase.

For example, by expecting a slightly different approach to the vision of the product, wanting to change a component, expanding the app with an additional subpage, introducing an additional landing page or any other change not anticipated by the UX team.

The problem gets especially visible when, for example, one UX designer changes the design or part of it in accordance with previous arrangements, while another UX designer, after a momentary “customer spurt,” quickly adds changes to the UI. Both UXs work without a common pattern, which leads to the creation of many anti-patterns. And sometimes to “reinventing the wheel.”

Lack of consistency in the interface on a website or in an application can create many ambiguities, and thus the appearance of accessibility errors that will be detected in an audit.

This is especially true when on different pages or places in the application (theoretically looking the same), we find several similar, but slightly different accessibility errors. For example, the existence of two different contact forms, several different contrast-related errors, or an inconsistent placement of UI elements on several pages.

Since one of the characteristics of a good design is its consistency – which has a considerable impact on accessibility, namely on the perceivability principle (Perceivable) through requirement WCAG requirement 3.2.4 Consistent Identification.

A Design System applies the principle of consistency to the entire system of interface components, so ensuring accessibility in one template or system design organism, through consistency and work on a single template, allows ensuring accessibility also where the selected component will be reused. Most often in many places of the application or page.

 

New call-to-action

 

2. Scalability

 

Working with a well-built Design System also enables to meet certain WCAG 2.2 requirements on the triple A level (AAA). Practically, these requirements they can be (to some extend) covered without writing even one line of code. Most of the work will happen during UI design.

 

These requirements are:

1.4.1: Use of Color

1.4.3: Contrast (Minimum) (AA)

1.4.6: Contrast (Enhanced) (AAA)

1.4.11: Non-text Contrast (AA)

2.3.3 Animations from Interaction

2.4.7: Focus Visible (AA)

2.4.11: Focus Appearance (Minimum) (AA)

2.4.12: Focus Appearance (Enhanced) (AAA)

2.5.5: Target Size (AAA)

2.5.8: Target Size (Minimum) (AA)

 

As you can see, the abovementioned requirements are strictly related to design. They cover colours, button sizes, typography, icons, animations, and more. Setting up these elements defines the look and feel of an entire website or app. Clearly, they also have a vital impact on accessibility.

From that perspective, creating a Design System will not only enable you to get around 10% of WCAG 2.2 requirements done but also introduce scalable accessibility. After all, since the components we’re talking about will be re-usable, they will get the chance to have a continuous impact on other product elements that are also based on the Design System.

Finally, if well-implemented, testing all of the mentioned requirements is easy. Most of the time, it should only be a formality; initial evaluations should be completed during UX tests with disabled people.

 

3. Cost-Effectiveness

 

Let’s consider the following scenario.

There are 2 digital product groups – called A and B – and each of them also has 2 sub-products, a website, and an app. A was designed with the use of a Design System. B was designed without it.

During accessibility testing, both product groups had accessibility issues related to the user interface – on the website and in the app.

Next, these issues, prioritized, landed on the desks of two UI designers.

The first UI designer, handling A, removes the problem in the web application and changes the Design System. The second UI designer, responsible for B, also solves the issue in the application. Obviously, they have no Design System to make changes in.

During re-testing, it turns out that the issues previously present in A are now solved entirely. Unfortunately, B still experiences problems with the second product – on the website.

Naturally, the website also needs to be fixed, so, the entire process takes place a second time. The tests take longer, and the Product Owner is unhappy that accessibility is expensive and prolongs the final deployment.

So, as you can see, the problem has been avoided entirely thanks to a Design System. With one source of truth (SOT), developers get clear information on where to implement changes, which is key in many systems based on design.

 

Design Systems Make Accessibility Cheaper and Easier to Manage

 

Implementing a Design System is useful not only from the perspective of obvious benefits but also thanks to the usefulness for the perspective of accessibility.

If you need to manage a few designs at the same time, having a Design System may not only be pivotal considering accessibility or process optimization, but it may simply be unavoidable.

 

Improve-Your-Digital-Design-Process-Playbook

Latest posts