Design Systems: The Key to Accelerating Accessible UX Design

Any company that provides digital services or experiences today, whether it’s an app, a website, or a software product, knows that user experience (UX) is a key brand differentiator. It’s what takes an online task from simply doable to enjoyable and keeps consumers or users coming back. And in order to ensure that audience includes people with disabilities, teams need to prioritize accessible UX design, considering and designing for the needs of all users, of all abilities, including those who may access the digital world with assistive technologies or features.

However, as organizations scale, providing aesthetically consistent—and consistently accessible—UX design can become challenging. The solution? Accessible design systems.

In our webinar with CarMax, we explored how the largest used car retailer in the U.S. prioritizes accessible UX while rapidly innovating online. Our panel included:

• Molly Covert, Manager of CarMax’s Horizon Design System
• Robertson Odom, Principal Software Engineer at CarMax
• Karen Hawkins, Head of Accessible UX Design at Level Access

Drawing on our conversation, this blog will explain the basic elements of design systems and how they relate to accessible UX design. We’ll also unpack the advantages of design systems for all organizations committed to online inclusion.

Start your journey toward accessibility.

Contact us

What is a design system?

A design system is a complete set of standards for managing design at scale through reusable components and patterns.

A design system encompasses:

• Reusable design elements: the full set of designs for all components and patterns including all permutations / variations, from smaller elements like buttons and links to larger elements like toolbars and interactive charts.
• Reusable coded elements: the full set of code for all the reusable design components.
• Documentation for the use and application of both in different contexts (e.g., dos and don’ts, etc.).

Essentially, a design system is a set of building blocks that can be used again and again to efficiently create digital experiences that are both aesthetically and functionally consistent.

What do design systems have to do with accessibility?

Not all design systems are accessible—and no design system can guarantee accessibility. However, they can be built with accessibility in mind. To do this, organizations need to make accessibility part of the acceptance criteria for all design elements and coded components embedded within a design system. They also need to incorporate accessible UX design requirements into supporting documentation. For example, documentation should include instructions for how an element would function to support keyboard and pointer interactions and provide context as to how the element should operate for screen reader users, etc.

When created in this way, design systems codify accessibility throughout the digital experience creation process. They not only integrate accessibility into organizational standards for design and development (such as conformance with a certain level and version of the Web Content Accessibility Guidelines), but also equip teams with practical, easy-to-use resources that are built to conform with these standards, and documentation for how to apply them consistently.

How organizations benefit from accessible design systems

From a designer’s point of view, then, it’s clear how design systems can streamline and simplify daily work. But to find, assemble, audit, and codify all existing (or future) design elements within a brand is a significant time and capacity investment. So, from a broader point of view, why should an organization’s leadership sponsor such an initiative? In this section, we’ll explore the advantages of design systems—both broadly and in the context of digital accessibility.

Improved efficiency

• Design systems empower product and development teams to operate more efficiently by equipping them with a set of pre-built components for new experiences. Rather than creating from scratch, teams can simply stitch together pre-existing blocks of code to produce aesthetically cohesive, fully functional properties. This significantly reduces time-to-market for new products, features, and capabilities.
• When accessibility is integrated into design systems, it’s already a part of digital experiences from day one. This means teams can spend less time testing for, and remediating, accessibility issues in development and QA.

Consistent user experiences

• The elements and code components in a design system are already optimized for UX—so when teams leverage these building blocks, the resulting products and features will reflect a consistent, cohesive experience, a mark of quality that enhances an organization’s brand.
• From an accessibility standpoint, a consistent experience is easier to learn—it’s easy to remember how to interact with a consistent experience—and as a result, it is more efficient for users. So, consistent UX supports all users by providing a smoother, simpler way to achieve their goals. In particular, it ensures that a user of assistive technology, or a user who relies on a particular accessibility feature, can engage successfully across their entire user journey.

Elevate your designs with agile accessibility

Get the guide

Scalability

• Teams can create countless new experiences from a single design system, making these systems ideal for organizations operating at scale. Additionally, because design systems empower teams to operate efficiently while maintaining a unified brand identity, organizations can operate at the same velocity as they grow—they don’t need to incorporate additional checks for quality or consistency.
• When using an accessible design system, accessibility is built into—not built on top of—new experiences, so teams can scale rapidly without generating an unmanageable mountain of accessibility issues as they do so. They won’t have to pay back that technical debt by halting innovation down the road.

Embed accessibility in your design system

Accessible UX design is an ongoing responsibility. To sustain momentum, organizations need to integrate accessibility into their existing processes rather than constantly solving for it after-the-fact. Design systems streamline this practice, enabling teams to operate efficiently and scale quickly, while serving all users.

While accessible design systems drive a variety of positive outcomes, creating them can be a complex process. To ensure an efficient yet thorough approach, it’s helpful to lean on a trusted partner. Level Access’ Design Evaluations can help teams vet the accessibility of their design system’s building blocks—ensuring the accessibility of choices in color palettes and typography as well as component or pattern libraries. And, with role-specific accessibility training for designers and developers, we can help upskill your teams to ensure they’re learning the “why behind the what” when it comes to implementing accessible UX design.

Reach out to our team to learn more.

eSSENTIAL Accessibility has changed its name to Level Access! Read More