There’s a misconception that users with disabilities make up a minority of online users. We tend to relate accessibility only to people with assistive technologies or visual impairments like color blindness. But design teams must also consider how people with cognitive disorders and dyslexia experience digital products.
According to the United States’ 2012 census, “56.7 million Americans (18.7% of the US population) have some type of disability, and out of this number, an estimated 38.3 million (12.6%) have a severe disability.”
How US citizens’ disabilities relate to technology:
19.9 million (8.2%) have difficulty lifting or grasping, thus impacting their use of a mouse or keyboard.
15.2 million (6.3%) have a cognitive, mental, or emotional impairment, affecting focus, absorbing content/instructions, and cognitive load.
8.1 million (3.3%) have a vision impairment, requiring screen readers or magnifiers to view content. Visual impairments also include color blindness disabilities.
7.6 million (3.1%) have a hearing impairment, relying on transcripts and captions for video and audio.
Making digital experiences inclusive for all people is essential. However, when looking at the numbers above, organizations must also consider the business value people with disabilities offer.
Accessibility Improves User Experience
Making designs accessible benefits all users. A great example is a web page’s table of contents and headings (hierarchy) for articles and documentation.
These accessibility features allow users with screen readers to absorb content and find what they’re looking for quickly. Other users can use the same features to scan a page’s header tags or use the table of contents to move around the page with minimal scrolling.
How Design Systems Can Help With Accessibility
When an organization builds accessibility into its design system, teams are free to develop product experiences knowing that designs are consistent and conform to web content accessibility guidelines (WCAG).
From a business perspective, design system accessibility saves time while increasing consistency, thus creating positive experiences for all users.
Making Components and UI Patterns Accessible
Organizations should treat design system components as the baseline for accessibility. This baseline includes colors, typography, spacing, sizing, and other component-based factors.
The goal is to take baseline accessibility decision-making away from designers so they can focus on design. Designers must still be aware of accessibility, but they’re not starting from scratch every time.
A Holistic Accessibility Approach
Design system accessibility is just the baseline towards making user interfaces accessible. Designers must still conduct accessibility tests on interfaces, navigation, and user flows.
Testing Accessible Design Systems
Testing is critical to ensuring your design system is accessible. UX designers should always start by testing design system components using tools, followed by live tests with participants to confirm these results.
Once components pass accessibility tests using tools, designers must conduct live usability studies with relevant participants. For example, people with visual/hearing impairments, cognitive challenges, and those using assistive technologies.
If you have never done a UX audit, we highly recommend completing this before moving on to solving accessibility issues! Conducting a UX audit will ensure you eliminate fundamental usability issues and design system inconsistencies.
For example, many organizations discover that design system components have inconsistent color palettes because designers use the wrong hex codes. You’ll want a clean slate before you audit for accessibility, or you may end up doing double or unnecessary work.
Start your design system accessibility audit by listing every component, UI pattern, color, icon, asset, typeface, and other UI items. This way, you have a step-by-step checklist of everything you need to audit.
Conclusion
Creating an accessible design system promotes inclusivity and gives designers a baseline to scale accessibility to user flows, navigation, page layouts, and other areas quicker and easier.
Designers no longer have to worry about colors, typography, contrast, hierarchy, and other factors, because that work is already done! They only have to evaluate what happens when you combine these elements to design user interfaces and navigational flows.
Photo by Birger Strahl on Unsplash