Design System Accessibility: Check What You Need to Know

An accessible design system makes it easier for designers to create products that don’t discriminate users with disabilities. Design a system that is accessible in the first place, test it with available tools, and audit it from time to time to ensure it fits the standards. Let’s see how.

Design system accessibility is the first step towards creating inclusive customer experiences for all users. Organizations must also recognize the business value of making accessible products and websites.

More than a billion people live with disabilities globally – that’s 15% of the world’s population. If your products don’t cater to people with disabilities, you’re handing a competitive advantage to your competition!

We’re going to explore how you can make your products more accessible by starting with a baseline – your design system. With an accessible design system, you can quickly scale accessibility to pages, interfaces, navigation, user flows, and other areas of your designs.

Managing a design system is a challenging, time-consuming task, but it doesn’t have to be! UXPin provides organizations with the tools and features to build and manage a design system. Sign up for a free trial to see how UXPin can save you time and streamline your UX workflows while creating better user experiences for your customers.

The Importance of Accessibility

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.

Tools to Test Design System Accessibility

Accessibility tools are excellent for testing design systems for visual impairments. UXPin’s built-in accessibility features allow UX designers to check color and contrast without leaving the design editor.

Our color contrast checker evaluates UI components against WCAG standards for AA and AAA levels. With the contrast checker activated, UXPin creates two lines on the color picker, so designers can identify where they need to be on the spectrum to meet either AA or AAA levels.

• Level AA: requires a contrast ratio of at least 3:1 for text not smaller than 24px (18px if bolded) or 4.5:1 for text smaller than 24px.
• Level AAA: requires a contrast ratio of at least 4.5:1 for text not smaller than 24px (18px if bolded) or 7:1 for text smaller than 24px.

Designers can also use UXPin’s color blindness simulator to experience user interfaces from this demographic’s perspective, including:

• Red-green color blindness (Deuteranomaly, Deuteranopia, Protanomaly, Protanopia)
• Blue-yellow color blindness (Tritanomaly, Tritanopia)
• Complete color blindness (Achromatomaly, Achromatopsia)

Accessibility Testing With Participants

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.

Industry experts like Fable and Deque can facilitate testing to help companies find the right participants and conduct accessibility tests that produce meaningful, actionable results.

Auditing Design Systems for Accessibility

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.

You can use this list to cross-reference the relevant Web Content Accessibility Guidelines. WCAG provides a helpful quick reference UX designers can use to audit their design systems. This reference includes guidance for WCAG 2.0 and WCAG 2.1.

Using Atomic Design Methodology for a Comprehensive Accessibility Audit

Following Brad Frost’s Atomic Design Methodology, consider breaking your design system down into atoms, molecules, and organisms so you can audit both the parts and wholes.

• Atoms: The most basic building blocks that can’t be dismantled further. Like form labels, inputs, buttons, icons, and other singular building blocks.
• Molecules: Simple UI components that function together. Like a search form with an input, label, and button.
• Organisms: Groups of atoms and molecules that make up complex UI components. Like a standard website header with a logo, navigation links, and search form.

By breaking your design system down to its core, you can start with the basic building blocks and scale your accessibility audit to more complex UI components.

Non-Text Content 

Icons and other assets should help users with explicit alt text so screen readers can identify them correctly. WCAG provides designers with guidance on how to make Non-Text Content accessible.

Clear Labels, Alerts, and Messages

Messages, labels, and alerts must be helpful and provide context for users with assistive technologies.

For example, if you have multiple required fields on a form but you only have one error message saying “This field is required,” how will someone with a screen reader know which field you’re referring to? Each required field must have its own error message; “First name is required,” “Email is required,” and so on.

Designers must also use labels for every element and component so that screen readers can provide users with context and instructions. For example, you might label each element of a search form with an icon and input field as follows:

• Search icon: label=”Begin search”
• Input field: label=”Search query”

A screen reader knows what each element does so the user can interact with the UI component to search a product or website.

Summary

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.

Improving Design System Accessibility With UXPin

With Design Systems in UXPin, you can build and manage your organization’s design system all in one place-no plugins or addons required! Sync your design system to all teams and even set permissions to preserve consistency and integrity.

Sync your design system to all team members so designers only use colors, typography, assets, and UI patterns that conform to your organization’s accessibility standards.

Use descriptions to add documentation and guidelines (including accessibility instructions) for every UI component in your design system, so designers and developers are all on the same page.

Ready to start building more inclusive user experiences for your customers? Sign up for a free trial to discover how the world’s most advanced code-based design tool can revolutionize your organization’s product design.