Don’t sweat the small stuff – Design Systems and complex patterns

accessibility strategy

Don’t sweat the small stuff – Design Systems and complex patterns

Design systems are great, they make building an accessible digital service easier, consistent and repeatable across many similar digital products in organisations. But foundation elements only make up a small part of functionality in today's online services. Build in greater accessibility support by focusing your efforts on building accessible patterns and workflows.

"Ours is different"

The one problem I tend to see when a new design system is created are the same type of components provided, just styled in a slightly different way. All design systems need to start from somewhere and foundation elements which include links, buttons and form controls are a great intro into building accessible services.

But contemporary digital services are rarely built with just foundation controls. They have links, headings and form controls but more than ever these foundation elements are composed into patterns which allow a user to perform complex interactions.

Sorting data, updating details and validating forms are some of the interactions which do cause significant accessibility challenges and which feature in many digital services.

Avoid the veneer of an accessibility

Focusing on building in great accessibility support into foundation elements is great and you can tick off some quick and easy accessibility wins.

if you only provide basic controls in your design system, you're only really delivering a thin veneer of accessibility across your digital estate.

Add the complex patterns today

There's a trend of trying to build simple services with simple interactions, but such an approach masks the need for complex interactions. If these types of patterns aren't being built into your design systems or even on the roadmap of building into your design system, your developers must try and find solutions which fit.

Because web accessibility is a non-core skill it can lead to patterns and workflows which have been implemented with the best of intentions but falling short and unfortunately providing poor accessibility support. Combine this with multiple teams, who may all do something slightly differently and what results is a jumbled mess of inconsistent accessibility.

Don’t sweat the small stuff

Don’t think building a design system and filling it with accessible foundation elements means you've completed accessibility and its done. It's never done.

Foundation elements provide near perfect levels of accessibility out of the box and they work with many different browsers and assistive technology, meaning its ok to focus on bigger accessibility challenges.

Foundation elements only provide a small part in contemporary online services, and they can be assembled in inaccessible ways as Nathan Curtis explains:

… composition reveals how preposterous it is to think a design system’s parts guarantee accessibility. There’s more than element order and attributes: orientation, audio & video timing control, input technology, the readability of words. Today’s design systems offer advice, but it’s up to each author of an experience to understand and implement the depth of WCAG’s dense standards.

If the foundation elements are 25% of an online services componentry focus your efforts on the remaining 75%, build the complex patterns which your services use, and your users require.

Assemble in an accessible way

It's how those components are assembled which will make or break accessibility in your digital products, a button on its own is inherently accessible but when that same button is used in a complex pattern that has little accessibility knowledge built behind it, that’s when problems begin creeping in.

A design system serves as the blueprint for your digital service, it's the bare minimum and charts the way forward, it's never complete … you've still got work to do.

Ross Mullen

Ross Mullen

I'm director of CANAXESS, a web and digital accessibility company based in Australia. I help large companies, charities and emerging startups with web accessibility and inclusive design.

Canberra, Australia https://www.canaxess.com.au