Want to create tech for good? Design systems can help
10 tips for creating accessible products with design systems, component by component.
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!
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.
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.
Conclusion: Design systems are enablers
Design systems are a powerful tool for not just making your products come to life, but also bringing the “good” into the life of your products.
Defining our principles and building our design systems based on those principles means we can live by those values as our system grows.
There are loads of powerful tools out there to help us develop accessible components as the smallest design units. But the components alone are not enough; people are the key.
Design systems bring people together to form and agree on their standards, encouraging empathy, empowering teams and bridging disciplines.
As systems affect other systems, there is value in making our systems available publicly, potentially bringing industry and social change.
Combining these elements together, design systems are then hopefully used to create tech for good and, through that, more possibilities for more people.
I believe in the power of design systems and spoke about what you’ve just read at the 15th edition of PiPeople. PiPeople is an event for curious minds based in London, organised by Idean. 💐💐💐
Speakers included Jo Hand from Giki, Leticia Galdon from Paz.ai, Bailey Kursar from Toucan, and yours truly sharing their experiences creating technology with positive social impact. Tech for good.
