We work diligently to ensure good experiences. As consumers of technology, we know all too well how it feels when devices and technology frustrate us. Apps don’t behave as expected, or it’s hard to complete a simple form fill because the interface elements are crowded together. That frustration compounds when you face challenges due to a disability. Whether it’s from getting older or living with a neurological condition such as Parkinson’s disease, our everyday user challenges become exponentially worse when we battle two fronts: interface and disability.

Disabilities affect a staggering number of people. According to the U.S. Census Bureau, 27.2 percent of people living in the United States had a disability in 2014. These are our friends, neighbors, coworkers, family members, customers—and eventually all of us in some way, because no one gets younger and more agile as time passes. Our role as designers is to build better and more human-centered experiences that are inclusive of all people.

When we design for disability first, you often stumble upon solutions that are better than those when we design for the norm.

Elise Roy — TED talk, When We Design for Disability, We All Benefit

Accessibility and Design Systems

Designing for accessibility can and should be so much more than color contrast ratios and type sizes. At our best, we’re creating and solving problems. When we treat accessibility as a requirement box to check, we can miss opportunities to design better products and services, period.

If the role of a design system is to provide a company with the tools to build consistent digital experiences, what would it mean if a design system were built to be inherently inclusive? That’s a win-win. Design systems that establish an inclusive experience and contain patterns that are accessible keep bad practices from propagating across the organization’s digital experiences.

Here are some examples and trends of inclusive approaches that could be integrated into the design systems we create.

Establishing a Culture of Inclusivity

Accessibility should be ingrained within the organization at its core. Many companies are putting more emphasis on diversity and inclusion in their hiring practices. This shift creates a better environment and elevates the work within our design systems and the teams that use them. If your team has someone who has a disability, the designs produced will almost certainly be better because that person is helping solve a problem from a different perspective.

Another way companies build accessibility into their culture is by creating visual reminders and communication tools within their design systems. Sainsbury’s Luna Design System includes posters for teams to print and hang around their workstations and collaboration spaces that communicate various accessibility themes. By including the posters within the design system, the organization’s commitment to inclusivity is reinforced.

Sainsbury's Luna Design System reinforces screen reader standards with posters hung throughout the office.
Sainsbury’s Luna Design System uses accessibility posters to reinforce inclusive design.

Component-Specific Guidance

More design systems are striving to include component-specific documentation that outlines any accessibility implementation considerations within the component library. Previously, design systems only signaled that the design system components were WCAG 2.0 AA compliant by including a note or section with a general statement about the accessibility of the design system. Including component-specific guidance will help ensure that accessibility is top of mind when implementing the experience and its components of every project.

The US web design system outlines accessibility guidelines for component designs.
An example from the U.S. Web Design System showing accessibility implementation guidelines for components.
The U.S. Web Design System's guidelines show various button components that include appropriate states for accessibility.
U.S. Web Design System’s guidelines show various button components that include appropriate states for accessibility.

Designed and Coded for Accessibility

By providing color contrast and typography accessibility guidance, you’ll meet core accessibility requirements; however, this doesn’t ensure consistency. If design system components are coded with baked-in accessibility considerations, those components are more likely to be properly implemented. Aria tags and customizable states are included in code snippets to enable users to customize the components without compromising accessibility. This approach can also create linkages between design and development for an easier handoff.

Shopify's Polaris design system includes accessible and customizable coded components, such as buttons.
Shopify’s Polaris Design System includes accessible and customizable coded components.

New Shoes for the Cobbler’s Children

Have you ever heard the saying, “The cobbler’s children have no shoes”? We can get so busy making things for others that we lose sight of our own team’s needs. But could the tools we use to create accessible systems be more accessible themselves?

A team at IBM built a tactile component library of real-world objects — felt, paper and glue, toothpicks, and other textures — to enable a development partner who has low vision to experience and feel the arrangement of the components and give the design team specific feedback on interfaces being built with design system components. Creators of design systems should not only consider the accessibility of the components being built for the user’s experience but also treat users of the design system tools with the same consideration. This will ensure that all types of design system users can easily create with the design system components regardless of physical or cognitive impairments.

IBM used felt, paper, glue and other tactile materials to create design system components.
IBM’s tactile component library.
A woman works with a visually impaired man who uses braille to read a design system.

Taking Keyboard Navigation a Step Further

For users with a sight or motor function impairment, navigation with a mouse can be difficult or impossible. Giving users the ability to navigate with their keyboards is a core accessibility consideration. Standard keyboard navigation is achieved with a combination of standard keys such as the tab key, arrow keys, the space bar, enter or return, and escape. This allows most users to navigate through the page in a relevant hierarchy and flow — if the page is designed correctly.

Some companies take it a step further with keyboard commands for certain features within the experience. Looking at an application like Slack reveals that key commands can be built into design system components within the interface to call up specific functionality. This enables users to shortcut directly to a feature without needing to tab through the parts of the experience that are not relevant to their current task.

Using Voice and Sound

Voice user interfaces (VUIs) can help those with disabilities navigate user interfaces more efficiently. VUI guidelines and patterns can be defined within an existing design system to supplement more traditional design patterns and components, or they could be established as a set of patterns created for a specific usage or tool. VUI components can include triggers, leading cues, feedback, error states, and ending cues. Voice interfaces can also have supplemental visual UI components that need to be defined and made accessible for other types of users, not just the sight-impaired.

Sound is becoming increasingly more prevalent as a tool to build experiences. Our design systems should include sound-based attributes to enable those without sight to gain the same utility as sighted users, including the ability to respond. For sighted users, the sound provides an additional layer of sensory interaction and feedback that reinforces specific patterns or actions within a brand’s experience.

Apple’s Voice Control Interface assigns each UI component a number to increase speed and accuracy when using speaking commands.
Apple’s Voice Control Interface assigns each UI component a number to increase speed and accuracy when using speaking commands.

Experiences That Mutate


Promising explorations in experience design could potentially change the paradigm for design systems and the experience for all users. An example: mutative design. Though a few years old now, Project Phoebe shows the potential that technology has to respond to users’ physical needs. Mutative design could enable systems to adapt to individual users. Their demographics, interests, learning style, and abilities or capabilities could all factor into the best possible permutation of the experience.

As the system learns about the user, the core experience and UI adjust based on attributes or considerations. For example, the interface for a user with low vision might adjust the color palette and type size to create a more pleasant high-contrast instance of the experience. In the near future, this approach shows great promise for creating design systems that enable a more fluid but consistent experience for all users.

Diagram showing an orange line that represents a user's journey. Blue dots are starter states and white dots are mutation states.

It is clear that there is a concerted effort in our profession toward becoming more inclusive. Designers play a large role in this, and we should seize any opportunity to innovate and build better products, including opportunities created by accessibility requirements. Companies need to ingrain it into their culture. We must create better components and documentation, and use new methods of interaction such as conversational interfaces to ensure that our design systems start with inclusivity at their core. Inclusive design thinking can lead to a much more positive and seamless experience for all users.

This article was produced in partnership with Ogilvy as part of their design system series.