Featured Image
UX Design

Enabling digital accessibility with design systems

When building successful companies, CEOs often ask, “If your company was a person, what would its personality be?” This exercise in characterizing a company’s ethos helps define its culture and ethics, shaping its long-term goals and vision. Similarly, in digital product development, we can draw a parallel to creating design systems.

Creating a digital product isn’t just about writing clean code and crafting a sleek user experience. It’s also about the human element—the empathy, accessibility, and inclusivity embedded within the product. Design systems lie at the heart of UX design, serving as the blueprint that ensures consistency, efficiency, and accessibility across all digital touchpoints.

What is a Design System?

A design system is the foundation of cohesive digital product development. It is a strategic framework that bridges the gap between design and development, enabling teams to create products that are not only visually appealing but also functional, accessible, and user-friendly. 

Just as bricks must be uniform to build a stable house, a design system ensures that each component is consistent and fits together seamlessly to create a cohesive product. Similarly, just as molecules combine to form atoms and then larger structures, design systems provide the foundational elements that build up to complete, polished interfaces.


Source

A well-crafted design system is a living document that evolves with the product, fostering collaboration across teams and disciplines. It encompasses not only the visual elements, such as typography, color palettes, and iconography, but also the interaction patterns, accessibility standards, and voice and tone guidelines. This holistic approach ensures that every team member, from designers to developers to content creators, is aligned with the product’s vision and goals.

Importance of accessibility in design systems 

Disability touches 73% of consumers and controls more than $13 trillion in annual disposable income. But the narrative of accessibility in design systems is more than a revenue story. It’s a commitment to creating digital experiences that resonate with all users.

Web accessibility is a global imperative, underscored by significant advancements and stringent standards like WCAG 2. But beyond these guidelines, international mandates are setting the pace. The European Union, for instance, has set a deadline for digital accessibility compliance by June 2025, reflecting how seriously global leaders are taking the push towards an inclusive digital environment.

This focus on accessibility isn’t just about ticking compliance boxes. It’s about bridging the gap between regulatory adherence and true inclusivity. Despite advancements, many digital products still fall short of offering an equitable experience to all users, illustrating the chasm between compliance and genuine accessibility.

This is where design systems come into play, acting as pivotal instruments in closing this gap. Imagine design systems as the catalysts that embed accessibility into the DNA of digital products. By integrating inclusive principles from the outset, design systems ensure that accessibility is a foundational element, not an afterthought.

Companies that have embraced accessible design systems have catalyzed their transformative journeys. 

IBM’s Carbon Design System is a prime example of a comprehensive design system that emphasizes accessibility. Carbon is an open-source design system that IBM uses across its various products and platforms, ensuring a consistent and accessible user experience. 

Meanwhile, BBC has been a pioneer in accessible design with its GEL (Global Experience Language) design system. By prioritizing accessibility, the BBC ensures its vast range of digital content is accessible to all viewers, including those with disabilities. 

The economic and social impacts of inclusive design are profound. Financially, accessible design systems reduce the need for costly retroactive fixes and enable sustainable, long-term maintenance, resulting in a robust return on investment. Socially, they promote equity and empowerment, fostering a more inclusive digital world.

Redefining accessibility in modern design systems 

Modern design systems are evolving, and accessibility is at the forefront of this transformation. Integrating accessibility into design thinking requires more than just a checklist; it demands an accessibility-first mindset. This means embedding the principles of inclusive design into every stage of product development. By prioritizing these principles, we can avoid common pitfalls and create digital experiences that are truly inclusive.

Integrating accessibility into the design process

At the heart of inclusive design is empathy. To design for everyone, we must understand the diverse needs of our users. This involves conducting inclusive user research that captures a wide range of perspectives and experiences. Effective accessibility testing is equally crucial. It’s not just about meeting standards but ensuring that real users can navigate and interact with our products seamlessly.

Making an enterprise resource management platform more accessible 

InfiniTick (anonymized), a feature-rich enterprise resource management platform, faced significant accessibility challenges that impacted user performance and operational efficiency. To address these issues, InfiniTick partnered with Aubergine Solutions to upgrade its application, ensuring WCAG 2.1 compliance without compromising functionality.

The journey began with a 360° compliance audit, identifying all areas needing accessibility improvements. This comprehensive approach provided a clear roadmap for enhancements. Concurrently, competitive market research ensured InfiniTick’s upgrades aligned with industry standards.

A significant hurdle was the lack of a formal design system. Aubergine Solutions created a new design system from scratch, incorporating visual, auditory, cognitive, and motor accessibility features. This system seamlessly integrated with InfiniTick’s complex functionalities, preserving a smooth user experience.

Prioritizing enhancements based on impact and effort ensured critical issues were addressed first, yielding significant early improvements. The results were transformative:

  • InfiniTick saw a significant increase in positive user experiences, with users expressing greater satisfaction.
  • The Net Promoter Score (NPS) for InfiniTick increased, reflecting enhanced user loyalty.
  • Accessibility-related support requests decreased, indicating fewer user issues.
  • Compliance with WCAG guidelines led to the conversion of more large enterprise clients.
  • Accessibility became an inherent part of InfiniTick’s product roadmap, ensuring ongoing inclusive design.

InfiniTick’s transformation into a fully accessible, ADA-compliant platform set a new standard for product development. By integrating accessibility into their design system, InfiniTick improved user satisfaction, expanded its customer base, and reduced long-term costs.

Accessibility is now a core aspect of InfiniTick’s ongoing digital transformation, with Aubergine Solutions as their long-term partner. 

Shopify’s journey to an accessible design system

Let’s take a look at the journey of Shopify, a company that successfully transformed its digital product through an accessible design system. Shopify embarked on this journey by first recognizing the importance of accessibility for all users. They integrated accessibility into their Polaris Design System, making it a core aspect of their product development process.

Source

Impact-

  • Shopify reported increased user satisfaction scores among users with disabilities after implementing their accessible design system.
  • By making its platform more accessible, Shopify expanded its user base, reaching more customers who require accessible features.
  • Shopify experienced cost savings by incorporating accessibility into its design process from the beginning, rather than addressing accessibility issues post-development.
  • Shopify achieved WCAG 2.1 AA compliance across its core product offerings.

Key takeaways for accessibility in design systems

Accessibility is a journey, not a destination. Think of accessibility as a continuous journey rather than a one-time task. A holistic approach means considering every part of your product to ensure it’s accessible for all users.

Design with empathy. Engaging with users who have disabilities is invaluable. Their experiences and insights can guide better design decisions, making your product more user-friendly for everyone.

Plan for the future. By integrating accessibility from the very beginning, you save time and resources. This proactive approach helps avoid costly fixes down the road and ensures long-term sustainability.

Measuring and maintaining accessibility in design systems

Ensuring continuous improvement in accessibility is a challenging yet crucial aspect of design system management. Measuring and maintaining accessibility effectively requires a comprehensive approach that includes setting key performance indicators (KPIs), conducting inclusive user testing, and fostering a culture of inclusivity within the organization. Given the complexity and evolving nature of accessibility, a multifaceted strategy is essential for achieving and sustaining high standards.

The challenge of measuring accessibility

Accessibility measurement is inherently difficult due to the diverse needs of users with disabilities and the wide range of potential accessibility issues. Unlike other metrics that can be quantified with straightforward analytics, accessibility involves nuanced assessments that require both automated tools and human evaluation. Understanding this complexity is the first step towards developing an effective measurement and maintenance strategy.

Setting key performance indicators (KPIs) for accessibility

Effective KPIs should encompass both quantitative and qualitative measures, capturing the breadth and depth of accessibility within the product.

Quantitative KPIs:

  • Number of accessibility issues identified and resolved.
    Tracking the number of issues found through audits and user feedback, and monitoring the resolution rate, helps gauge the effectiveness of accessibility efforts.
  • Percentage of content meeting accessibility standards.
    Assessing the proportion of content that complies with standards like WCAG 2.2 provides a clear benchmark for accessibility performance.
  • Error rate in automated accessibility tests.
    Using tools like axe or WAVE to regularly scan for common accessibility issues can help maintain a baseline level of compliance.

Qualitative KPIs:

  • User satisfaction scores from users with disabilities: Gathering feedback from users with disabilities about their experience can highlight areas needing improvement that automated tests might miss.
  • User journey success rates: Measuring the success rates of users with disabilities in completing key tasks can provide insights into practical accessibility challenges.

Designing for all: Aubergine’s digital accessibility services

We share a passion for shaping digital experiences that stand the test of time, helping you scale beyond ceilings. Our bespoke approach weaves together the essence of your brand with the needs of the digital age, ensuring your presence is not just noticed, but felt and remembered. We deploy our deep-rooted expertise to navigate the future of design, ensuring your brand and product not only coexist but thrive together in harmony. 

Understanding stake-holder needs for data-driven prioritization

Our journey begins with understanding your unique requirements through stakeholder-driven audits. We delve deep into your business goals, aligning our approach with your priorities to ensure effective and practical solutions.

With a strong foundation in data-driven prioritization, we analyze user feedback, accessibility audits, and performance metrics. This allows us to pinpoint the most critical issues and develop a strategic plan that delivers impactful improvements. By combining insights from stakeholders with robust data analysis, we ensure that our accessibility enhancements are both meaningful and aligned with your overall business objectives.

Sustainable implementation and comprehensive design systems

Our sustainable implementation strategies are designed to balance immediate wins with long-term goals. By integrating accessibility into your existing design systems or creating a new one, we ensure continuous enhancement and monitoring, making accessibility an inherent part of your development process. Our strategies are crafted to provide quick, impactful changes while also setting the stage for ongoing improvements.

Our commitment to comprehensive design systems ensures your brand and product coexist harmoniously. We use an atomic design methodology to build scalable frameworks, enabling consistent and maintainable development. This approach fosters a seamless alignment between design and development teams, streamlining workflows and reducing time to market. By building from the smallest elements to complete templates, we ensure that every component works together cohesively.

Documentation, maintenance, and future-proof solutions

Detailed documentation and guidelines accompany every component we create, facilitating easy updates and ensuring consistency. Our support doesn’t end at launch; we offer ongoing maintenance to keep your design system effective and up-to-date. This commitment ensures that your accessibility standards are maintained over time, adapting to new challenges and user needs.

At Aubergine Solutions, we future-proof your product, designing for today while anticipating tomorrow’s needs. This ensures your product evolves with changing user demands and technological advancements, making it truly inclusive and user-friendly. By anticipating future trends and integrating scalability from the outset, we ensure that your digital products are not only ready for today’s users but also adaptable to tomorrow’s innovations.

Conclusion

Accessibility is a fundamental principle that shapes how we design and interact with digital products. By embedding accessibility into the core of design systems, companies can ensure that their products are inclusive, efficient, and capable of providing exceptional user experiences to everyone.

At Aubergine solutions, we believe in the power of inclusive design to transform digital experiences.We understand that accessibility is a journey, one that requires empathy, dedication, and continuous improvement.

Inspired to take the first step towards creating a more equitable digital future? Lets talk. 

author
Jinisha Gajjar
I am UX Designer working with Aubergine Solutions. At Aubergine, we follow the design process to work on all projects. Here I have worked on Web and Mobile applications, B2B and B2C applications. I like to keep myself updated about the latest design trends, news, and tools. I have a good knack for a few design applications like Figma, Sketch, Axure, Illustrator, and InVision Studio.
author
Avantika Mishra
Content scavenger. Love tech, innovative solutions for a better world, and I think AI could save the world.