DockYard Associate Product Design Manager Jon Akland contributed to this post.
Millions of people with a disability log on, navigate to, or search for digital products every day, only to be frustrated by an experience that’s inaccessible to them.
Accessible design should be inherent to every digital product. But too often accessibility gets left by the wayside in favor of faster development or attempts to save resources.
Only about 3% of the world’s top 1 million websites offer full accessibility, despite the fact that 71% of website visitors with disabilities say they’ll leave a site if it’s not accessible.
Fortunately, tools, plugins, and other workarounds exist to make accessible design easier to achieve. The best way to guarantee that your design is accessible, however, is to build it in from the start. Design systems can be an enormously useful tool to do just that.
While design systems are mainly used to guarantee consistency in UX design, they can also be a valuable opportunity to incorporate accessible design at the root of a digital product.
Leaving Users in the Dark
Inaccessible design leaves an enormous group of potential users without a way to access digital products. Take visual impairments as just one example: 12 million people in the U.S. have a visual impairment of some kind and could require a screen reader, screen magnifier, or some other kind of assistive device.
That means there are, in this one example, 12 million potential users of your digital product who are excluded from your product if accessibility wasn’t a consideration in your UXD process. Put simply, it’s just bad practice to create a digital product that’s inaccessible to millions of potential users.
But there is a huge range of elements to consider, from on-screen text variations, to color palettes, to focus states, and more.
The Web Content Accessibility Guidelines offer a solid foundation to start with. Making sure your design adheres to AA and AAA standards—our practice at DockYard—is the first step toward a fully accessible product
But it’s equally important that accessibility is available consistently across an entire digital product. This is where design systems become a particularly useful tool. Rather than going through the process of developing a digital product then trying to figure out whether it meets accessibility guidelines, design systems bake accessibility in from the start.
DockYard Associate Product Design Manager Jon Akland describes it as one layer on top of another in design: iOS standards, material standards, and similar guidelines lay the groundwork, then designers can take those and add a layer of accessibility on top.
“It’s not that hard. These filters exist, these guidelines exist; we’re not inventing it. We don’t have to go out and do user testing and be like, ‘Well, can you see this? Can you hear this?’”
The Right Tools
Design systems are inherently reusable, and while their primary function is to guarantee consistency across digital design, they also offer a fundamental way to approach accessibility.
“We’re not going to build a system of components and build a second system of components that someone with a screen reader can see. We build all the components that work for all people,” Akland said.
He drew a comparison to GDPR requirements set by the EU governing personal data use. GDPR standards technically only apply to data for people living in Europe, but as companies around the world made changes to adhere to the GDPR rules, they made universal changes that applied to all users.
Designers can—and should—take a similar approach when they’re incorporating accessibility goals into their UX planning.
Doing More with Less
Working this way can be especially useful for small design teams. For example, our team successfully used this approach for a client who has a sizable engineering team but a relatively small design staff.
Using design systems—in this case, incorporated into Figma—not only guaranteed that the design from one element to the next would be consistent, but also ensured that all of the accessibility standards built into each element from the start were carried over at every step. That way, a small team of designers didn’t have to spend any additional time building accessible.
“It’s just an intelligent way to design, and it’s also an interesting way to design collaboratively because we all have our hands in the system at all times,” Akland said.
Building accessibility into design systems at the start is also a step toward a successful scale. Knowing the right elements are already in place means there are no extra steps—and no additional delays—to contend with once it’s time to expand the audience for a digital product.
Accessibility shouldn’t be an afterthought. It should be built into every digital product from the start. With design systems, UXD teams of all sizes can guarantee that their end result is accessible to all users, without slowing down production or running into roadblocks before it’s time to launch.
