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.
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.
“It’s really important for us to codify accessibility as we build, because it’s just as important as color or typography.”
— Molly Covert, Manager of CarMax’s Horizon Design System
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.
- 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.
- 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.
“Our design system significantly reduces both design and technical debt. We’re building accessibility directly into components, so when we update these components, changes flow back into all consuming artifacts and applications. That ensures users’ experience remains consistent across our digital portfolio.”
— Robertson Odom, Principal Software Engineer at CarMax
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