Design systems cover everything involved in the creation of digital experiences – from how and when to use an accordion component, to the preferred use of italicised text. They’re a shared language for communicating accessible development and design: a set of building blocks that are tested for accessibility compliance. By using a design system – and ensuring accessibility is considered throughout – you can create digital experiences that are truly for all. 

If you’re not sure what design systems are, or you think you might need one, we recently wrote about the value of design systems.

Build standardised, accessible components

Have you ever found that the buttons on some mobile interfaces are too close together? It might be the result of a developer using components that aren’t meeting accessibility standards.  

Design systems are made of components like buttons or navigation menus — building blocks you can use to create products. By developing highly accessible building blocks, you can quickly prototype and build accessible experiences without having to re-test that components are accessible. 

With everyone in your organisation using the same guidelines and building blocks for accessible design, the outcome is a consistent and accessible digital experience.

Write readable and accessible copy

Imagine you’re on the bus and you’ve forgotten your headphones. But, all isn’t lost. You can use subtitles on that cat video you’ve been waiting to watch. Subtitles are useful in more situations than just those with auditory disabilities. Consider content as part of your design system and you’ll get the benefits of accessible content, design and development working together for your users. 

Following the Web Content Accessibility Guidelines (WCAG) is the best way to ensure your content is meeting accessibility specifications. That means, content writers using the design system will have a full guide for producing consistent, readable, understandable, and accessible copy.

This ensures that users can use and understand everything in the digital experience, and that all users have the opportunity to make the most of the accessible features. 

Create visual designs that work for everyone

Getting a migraine from looking at your screen too long? Activating the dark-mode setting could help you here. The benefits of accessible design standards and practices go beyond just those with disabilities.

Designers can draw on a design system to create accessible experiences in many ways. UX designers can quickly find the most accessible page layout when building wireframes. UI designers can find the appropriate colours, contrast, and fonts to ensure accessibility and brand consistency.  

The Web Accessibility Initiative (WAI) provides a number of resources for designers to use as guides and standards for creating accessible experiences – including the WCAG mentioned before. 

We’re working on a design system with the Department of Internal Affairs (DIA) that any government agency will be able to use for their products. We’ve based it on the tried and tested GOV.UK design system, also mixing in the best from the United States Web Design System (USWDS) and the Australian Government Design System. 

Connecting people, communities and government

Government departments now have a unified language, ready-made components, and a complete guide making their websites accessible to everyone. It’s a tool that allows our government to communicate effectively with the New Zealand general public. 

From internal use of the design system across government departments, to the rest of New Zealand using the government websites — we’re supporting DIA in their aim to connect people, communities and government.

How we’re prioritising accessibility 

From the choice of colour, to ensuring screen readers can easily interpret the components – accessibility and usability are at the forefront of every decision we’re making about this design system. 

When the all-of-government design system is implemented, it will provide consistent accessible design and functionality across any public service website that chooses to use it. This consistency will also breed familiarity, increasing user trust and participation in government digital services. 

Read more about the all-of-government design system. 

We've written a series of blogs for Global Accessibility Day 2019. You can read the rest of the series here:

Designing for all with collaborative and diverse teams

In celebration of Global Accessibility Awareness Day 2019 (GAAD), we want to discuss how to create digital experiences that everyone can use. And it starts with the people who create them.

5 ways to make your content more inclusive

Don’t let your content leave people out. Ruth, our Content Director, shares some of her top tips to make your digital content work for everyone.

React Accessible Accordion 3.0: An open source accessible component

React Accessible Accordion 3.0 ensures that developers have an accessible accordion component readily available.