What is a Design System, and Why Does Accessibility Matter Within It?

The Essence of Design Systems
Design systems are a set of reusable components that compile well-defined standards. They ensure consistency, efficiency, and scalability, making it easy to create aesthetically pleasing designs that look and feel the same across all platforms. 

Companies like Google with Material Design or IBM with Carbon have shown how amazing design systems can be. They ensure consistency, efficiency, and scalability, making it easy to create aesthetically pleasing designs that look and feel the same across all platforms. Design systems come with guidelines and documentation outlining best practices for creating and using components. This includes specifications for design tokens, which define visual attributes like colors, typography, and spacing.

Accessibility’s Role in Design Systems
Did you know that over a billion people globally live with some form of disability? That’s a staggering figure! And when it comes to incorporating accessibility, design systems offer a structured opportunity to prioritize best practices from the ground up. Accessibility should be a fundamental element of the design process, ensuring that applications and websites are usable by everyone, including people with disabilities. It involves considering various needs, from visual and auditory impairments to cognitive and motor difficulties. 

The relationship between accessibility and usability is integral to the overall user experience. By prioritizing accessibility in design systems, organizations not only fulfill their ethical responsibilities but also enhance usability for all users. Accessibility features such as straightforward navigation, readable text, and intuitive interfaces benefit individuals with disabilities and improve the experience for all users, leading to higher engagement, satisfaction, and retention. 



Though it may cost more upfront, studies have shown that the long-term benefits outweigh these costs. For example, the UK Government’s “The Business Case for Accessibility” report found that for every £1 spent on making a website accessible, the potential benefits ranged from £2 to £4.

The Fundamental Principles of Accessibility

The foundation of accessibility is built upon four main principles: perceivability, operability, understandability, and robustness. These four principles are known by the acronym POUR. These principles serve as guiding lights, ensuring that digital products are accessible to all users, regardless of their abilities or limitations.

Perceivability
At the heart of perceivability is the need for content to be presented in ways every user can perceive. This principle emphasizes the need for information and user interface components to be presented to users in ways they can understand. 
It involves providing text alternatives for non-text content, creating content that can be presented in different ways (such as larger print, Braille, speech, symbols, or simpler language) without losing meaning, and making it easier for users to see and hear content by separating foreground from background. Ensuring all users, including those with visual, auditory, and other sensory impairments, can perceive content is critical in creating accessible and inclusive digital experiences.



Operability
Operability dictates that a user should be able to operate interface components and navigation. This principle ensures that everything from links and buttons to forms and multimedia controls is designed so everyone, including people with disabilities, can use them. 

This includes providing keyboard-only navigation for those who cannot use a mouse, ensuring that time limits are adjustable for users needing more time to read or use content, and ensuring that content does not cause seizures or physical reactions. Creating an operable user interface means considering various user interactions and facilitating an environment where content is accessible through multiple input forms.



Understandability
Understandability refers to the concept of clarity, where users should be able to comprehend the information presented and how they interact with the system.
This involves ensuring that text content is readable and understandable, explaining unusual words or phrases, and making all functionality predictable to aid users’ navigation and interaction with the content.
Additionally, providing instructions or mechanisms to help users avoid and correct mistakes is crucial to understandability. This principle underscores the importance of clear and intuitive web design that accommodates users with diverse abilities, ensuring that everyone can access and benefit from the information provided.



Robustness
Robustness in web accessibility speaks to the need for our systems to be more resilient across different platforms, devices, users, and technologies. To accomplish this, developers must ensure compatibility with current and future user tools by following well-established web standards. 

This involves coding with semantic HTML, using ARIA roles appropriately, and ensuring that dynamic content is accessible. By adhering to these practices, content creators make their web pages usable for people with diverse abilities across different platforms and devices, ensuring a longer lifespan for their web content in the fast-evolving technological landscape.

Implementing Accessibility at the Roots of Design Systems

How early a design system considers the needs of all its users can make a profound difference. Accessibility should be an underlying principle that shapes every decision in a design system. Designers and developers should focus on understanding the diverse needs of their audience, including those with physical, cognitive, and sensory disabilities. This can be achieved through educating entire teams on accessibility, user research involving people with disabilities, and leveraging guidelines such as the Web Content Accessibility Guidelines (WCAG).



Here’s how you can integrate accessibility more meaningfully into your design systems:

Start with a strong foundation
Accessibility should be a core principle, not an add-on. As a design agency working on project-specific design systems, we are tailoring accessibility considerations to the specific needs of the projects. That means a constant balance between accessibility and aesthetics, with the occasional tackle of highest-level accessibility requirements when applied. This approach not only meets compliance but also resonates with a broader user base.

Involve real users in testing
Nothing beats real-world feedback. Following in the footsteps of tech leaders like Airbnb, who enhanced their design system with insights from users with disabilities, we prioritize incorporating input from individuals with diverse needs.
For instance, during the Kinetik project, a mobile app tailored for older people, our team strongly emphasized accessibility considerations. By actively engaging elderly users throughout the user research process, we ensured that every feature was tailored to their specific requirements, resulting in an inclusive and intuitive user experience for this demographic.

Educate your team

Regular training on the latest accessibility standards and practices is crucial. We’ve taken proactive steps to ensure that accessibility is ingrained in the skill set of every designer and developer. We’ve developed an extensive accessibility catalog encompassing theoretical principles and practical examples of accessibility practices. Our approach goes beyond the basics, as we’ve dedicated time to researching assistive technologies, testing tools, and even region-specific accessibility requirements. 

Our work doesn’t stop here, as we plan additional trainings and workshops, aiming to empower every individual involved in production to grasp the broader significance of accessibility and its impact on user experience.

Utilize automated tools and manual testing

Integrating automated testing tools and manual testing into our development process is pivotal for ensuring accessibility. While tools like Axe and Wave are unmatched for identifying technical compliance issues, our agency understands that they may overlook nuanced accessibility challenges that only human testing can uncover. We leverage these tools not only during development but also during the initial phases of design projects, such as UX and UI audits, to proactively address accessibility concerns. 

While manual testing by users with disabilities offers invaluable insights, our agency acknowledges the importance of manual testing by our professionals, ensuring thorough examination and refinement of accessibility features throughout the design and development journey.

Create detailed documentation
Documenting how each component of your design system addresses accessibility ensures consistency and ease of use. For instance, Shopify’s Polaris design system provides detailed guidelines on making content accessible, serving as a valuable reference for designers and developers.
However, providing extensive accessibility documentation akin to larger-scale systems like Shopify’s Polaris may not always be feasible. Nonetheless, we recognize the importance of guiding developers towards building accessible components. To address this, we strive to include as many annotations as possible within our design systems. These annotations often take the form of checklists and guidelines aimed at ensuring that developers have the necessary information to implement accessibility features effectively. 

While our approach may not offer the depth of documentation seen in larger systems, it still facilitates a smooth and streamlined development process, ultimately contributing to creating more inclusive digital experiences.

The Partnership between Designers and Developers

Collaboration between designers and developers is foundational to crafting an accessible design system. Designers leverage their creative insights and understanding of user interactions to conceptualize the digital product, while developers utilize their technical expertise to translate these concepts into functional elements. However, the actual accessibility of a digital product emerges when both roles actively contribute from the project’s beginning. 



To achieve successful collaboration, teams can implement actionable items and tips. Firstly, designers should provide developers with comprehensive accessibility guidelines and resources detailing best practices and techniques for creating inclusive designs. Concurrently, developers can contribute by offering technical insights and feasibility assessments to inform design decisions. Regular meetings and workshops focused on accessibility can facilitate knowledge-sharing and brainstorming sessions, fostering a deeper understanding of accessibility principles among designers and developers. 

Additionally, incorporating accessibility checklists and tools into the design and development workflow can help teams systematically evaluate and address accessibility issues throughout the project lifecycle. By encouraging a collaborative environment, teams can ensure that accessibility considerations are not overlooked and are seamlessly integrated into every aspect of the digital product.

Importance of Accessibility Documentation in Design Systems

Comprehensive documentation serves as a team reference point, clarifying accessibility requirements and expectations throughout the design and development process. To enhance the effectiveness of accessibility documentation, teams can incorporate actionable items such as providing detailed explanations of accessibility principles, offering code snippets and examples for implementing accessible components, and including real-world scenarios to illustrate the impact of accessibility features on user experiences. By embedding user stories and scenarios, designers and developers can gain a more profound empathy for the diverse range of users they serve, including those with disabilities. 


This approach transforms abstract guidelines into tangible, relatable experiences, making it easier for the team to understand the impact of their work on real people’s lives.



Accessibility annotations are a valuable addition to accessibility documentation within design systems. These annotations provide specific insights into the accessibility features and considerations embedded within design components. By including annotations alongside design elements, such as buttons, forms, and navigation menus, teams can quickly identify and understand the accessibility features implemented in each component. This includes information about keyboard navigation support, ARIA roles and attributes, focus management, and other accessibility enhancements. 


Additionally, accessibility annotations can guide developers during implementation, ensuring consistent adherence to accessibility standards across the design system.

A Call to Action

The foundation of creating an inclusive digital environment lies not only in adhering to accessibility guidelines but also in understanding the essence of these requirements. As we move forward, we must continue to advocate for and implement accessible practices in all phases of digital product development. 
This involves ongoing education, experimentation, and collaboration to refine our approaches and learn from each other. Every button made easier to click, every form easier to read, and every navigation made more intuitive, no matter the user, contributes to a more inclusive digital world. These seemingly minor changes can profoundly impact the lives of many, underscoring the transformative power of a commitment to accessibility.



As content creators, our journey towards more inclusive design systems is ongoing. It’s a path filled with learning, unlearning, and relearning as we continuously strive to understand and cater to the diverse needs of our users. The beauty of the Web lies in its ability to evolve and adapt — and in this evolution, accessibility is the guiding star.