Accessible Design Systems
Summary
An accessible design system is the foundation for making any product WCAG compliant. Creating a design system is challenging and navigating through the WCAG documentation can be even more daunting, but it doesn’t have to be.
Accessibility and Why It Matters for Everyone
If you are new to what web accessibility means, you’re not alone. I had a vague idea of what it meant before I started building software for educational institutions. WCAG standards are held in a much higher regard within the education, government, and healthcare industries. Outside of those, unfortunately, accessibility is something nice to have, if even acknowledged at all. WCAG encourages better design, engineering, and content practices. I treat it as the standard from which to start any project.
I love this graphic from Microsoft, a leader in the accessibility community. It shows the range from temporary to permanent impairments, and how it affects communication with one another.
Web Content Accessibility Guidelines (WCAG)
The World Wide Web Consortium (W3C) is a global organization that works together to create standards showing developers how to build web pages that are usable by people with disabilities. A well written web page will have an HTML structure able to be used by a screen reader, voice assistant, keyboard, or any other assistive device. It will have a clear navigation structure and the headings will relate to the content underneath them. The colors will have high enough contrast so people with colorblindness can navigate the same way someone who can see color can.
Accessibility means providing the same opportunity to access content, no matter their circumstances. The byproduct of doing that is fundamental good design.
WCAG is a compilation of all the design standards needed to meet certain levels of compliancy. WCAG A is the minimum, followed by AA, and AAA. Most institutions find WCAG A to be sufficient, AA is great (some require AA), and AAA is largely unobtainable as a whole, although individual criteria can be satisfied quite easily. Companies show their level of compliancy through a document called a VPAT (Voluntary Product Accessibility Template). This is typically a spreadsheet or table that lists all of the WCAG items and states how they meet each one, if they do. If they do not meet a standard, they can explain how so and if there is any current work being done to support it in the near future.
Leverage Open Source When It Makes Sense
The WCAG list is pretty long and a little intimidating. If you’ve attempted to create an accessible web page as a developer you may have found yourself asking, “What the heck is ARIA and why is it needed sometimes, but not others?” or “This component is a bit complicated - what’s the best way to make it keyboard navigable?” Don’t fret, internet friend, other smart people have created wonderful tools to make building accessible software much less scary.
Take MUI, for example. It is one of many component libraries available for free (with a paid tier). Notice the MIT license on their Github page and the impressive amount of community contributions. MIT means it’s available to use in your company. The contribution activity shows the project is actively being developed and they have funding to continue doing great things because there is a paid tier. When choosing a library, that is very important to look for.
MUI is at the top of my list for open source design system tools because they hold accessibility in such a high regard. Using accessible components does not automatically make your code accessible, but it sure helps cut down on the nitty gritty details you would have to write if you made the component from scratch. The time could be spent writing tests or working on new, fun stuff. Don’t reinvent the wheel if you don’t have to.
Accessible Design Patterns
WCAG compliancy falls just as much on design as it does engineering. It’s design’s job to set the colors, spacing, and organize content, among a myriad of other things. An open-source library also helps with all of this by providing basic combinations of common components. But, like I said with coding, using an accessible design system doesn’t make your product automatically accessible. The library is a tool to reduce mundane work, allowing you to design great stuff that everyone can use. By setting high enough color contrast at the theme level, you don’t have to think about it every time a feature requires the use of color to differentiate actions and hierarchy.
Encouraging Empathy with UX
Getting buy-in is the hardest part of getting a design system off the ground. If leadership isn’t on board it definitely will stay a daydream in Perfect Design Land. User Experience Research is an excellent way to create empathy where there is none. Show leadership how difficult their product is to use. Record a usability test and back it up with data for how much this unusable workflow is costing.
Engineers are usually 100% in on design systems, but unfamiliar with assistive technology. Youtube has plenty of videos showing a blind person using JAWS as a screen reader. Have them tab through the product they work on. Can they do it? Could it be optimized? I bet there’s a keyboard trap.
Using research to provide data that converts to money lost is the best argument for getting a business to care about accessibility. By caring about accessibility, the overall code quality and design practices of the company become stronger, leading to a better experience and an investment in a maintainable platform.
Conclusion
It’s enough of an uphill battle to get a design system in place, and to implement WCAG compliant software. Use the tools available to you to eliminate redundancy and menial work. Leverage the great work done by the open source community. User research can help foster empathy. Data will back up the reasons your product should be accessible. Everyone benefits from good design.