Want to create tech for good? Design systems can help
By: Eva Tkautz
Tags: Product Design, Front End Development, Figma, Design, Design Systems

As an industry, we’re great at making products newer and shinier. But we’re failing when it comes to accessibility.

As the Web Accessibility Initiative puts it, “many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use”. Wonky voiceovers. Borked keyboard navigation. Many products are simply unusable for people with visual and motor impairments.

This is a problem of big proportions. By not designing for a diversity of needs, we’re excluding people from social structures and services.

This led me to think about the ways we can create technology with a positive social impact.

From what I’ve learnt through my work in development and design — and how we build design systems at Idean —I found that design systems can facilitate accessible products from the outset. How so?

Here’s the rundown:

1. It starts with building blocks

Have you heard of Lego being used as a metaphor for systems? How about atoms, organisms, molecules?

Metaphors are a fun way of unpacking concepts. It’s about smaller blocks growing into larger blocks, eventually forming systems.

Say, this fun corn man can become a unicorn by attaching to an extra little brick — a fun helmet. Corn man can form a food system, together with other food characters like hotdogs and bananas!

Metaphors for systems — from corn, a unicorn, to a food system

2. Design systems are themselves systems

The clue is in the name! They are composite organisms of assets, guidelines and code, providing a structure for your product.

Built on smaller parts being brought together — from components to accessibility guidelines — design systems are a natural tool for tackling complexities like, yes, “how might we create accessible products?”.

What makes design systems powerful is the systems thinking that’s inherent to them as systems.

Systems thinking means understanding that the products we create exist within the complex structures we live in. There are as many ways to use our products as there are people. Including users with a range of usability needs.

3. Build values into your design system

Starting with a design system means that you’ll start ​by​ defining values and principles.

What’s the benefit of defining them upfront?​ They allow you to determine the impact you want to achieve. ​

If you prioritise accessibility, then that’s what you’ll build into your system — and that’s what you’ll scale as your system grows.

4. Components as our lego bricks

When we build design systems at Idean, we focus on making components as the smallest individual design units. Then these get combined into larger organisms, or systems.

So, imagine we’ve created a simple button component. This will form a larger bit of software — maybe a card or modal — ultimately resulting in a product like an online shop. Just like the metaphor before.

5. The power of components and standards

The focus on your standards at the component level is crucial. By standards, we mean rules within your design system.

For example, will you add aria-label attributes to your buttons as a standard? The attribute indicates the purpose of a button to screen readers. It can be used to close a modal — a pretty damn crucial action that people who rely on screen readers otherwise may not be aware of.

By applying your standards on the smaller building blocks of your system, your standards will self-replicate as they’re used to form larger blocks.

Also, as your team refers to the design system as a source of truth, they will be referring to those standards.

6. Tools we love: Front-end

At Idean, we use Storybook, a front-end environment tool for developing UI components. Its accessibility addon is especially useful. It checks your components for compliance with web accessibility standards and tells you where they pass or fail.

The modal passed — yay!

Another tool we use is ReachUI, an accessible foundation for React design systems. Each component is tested with assistive tech, ensuring your app has a solid, accessible foundation. Components are easy to style too. Win-win.

7. Tools we love: Design

We’re big Figma fans.

Features like live commenting and status cards mean that we can avoid gaps in communications, which risk inefficiencies and inconsistencies in products. The closer you work together, the less versioning and notation you need– and design systems bring exactly that: a tighter collaboration.

8. Making a cultural change

We say that if a design system doesn’t bring about cultural change, it’s not implemented correctly.

Working on a common goal inspired our team to have more cross-team conversations about accessibility.

We share articles on our team Slack. We demo accessibility tools to each other. Recently, a team member demoed how to use a screen reader and navigate a web page with it, encouraging cross-team empathy as well as empathy with the user. This informs our standards for quality, materialised in accessible UI components.

9. Be mindful of compromises

Nathan Curtis is a design systems practitioner who wrote an article around how much accessibility is enough.

He writes that, some teams would define success as 70% of the accessibility audit, others say 90%. Leaving metrics for success aside, he found that “accessibility spans definitions of done across disciplines”, and is as such, “best pursued from discovery through design and code to testing, delivery, and optimization”. This highlights the need for cross-team collaboration.

10. Systems ❤ systems

As all systems do, design systems impact other systems.

The standards you implement can impact other organisations’ standards. The idea of standards is twofold: standards as design system rules like UI components and documentation around them can influence those in other organisations — and through that, shape what’s acceptable.

We can contribute to this by sharing our systems (open source!) and making accessibility a more urgent topic in our industry. This will, hopefully, remove barriers for people and bring about a broader social change.

Some design systems that have inspired my work are Material Design, Polaris, and Bulb.