Designing for Inclusivity: The Shift Left Approach towards Accessible Design Systems (ADS)

In this evolving digital world, INCLUSIVITY is no longer just a buzzword. As the organizations and professionals are getting a better understanding of accessibility day-by-day, they know it’s a necessity. It is a known fact that creating accessible products ensures that everyone, regardless of their abilities, can engage with digital products seamlessly.

Let’s take an analogy of a common cold flu, we don’t wait for the flu to become a problem for us or our surrounding people or just sit on it to become worse. Instead, we prevent it to become a health hazard through medications and taking precautions. If we can prevent the common flu condition from getting worse, then why not do the same in case of Accessibility! Why don’t we prevent the digital product from becoming inaccessible for users by doing the needful or taking the necessary precautions from the start?

This is where the Shift Left approach kicks in. Lot of accessibility professionals question me, what is Shift Left approach? When I ask them about their opinion on it, they would mention to me that it’s basically starting to embed accessibility from the very initial stage, right? My take here would be slightly different. Yes, the goal is to start embedding accessibility right from the initial stage of product instead of being an afterthought. But for me, the Shift Left approach is a conscious effort which might not happen just like Thanos’s famous snap where the blip wiped most of population so that ones left behind gets chance to make a better world! At least this was his version (thinking emoji) of the blip.

Remember Accessibility don’t happen with a Snap! It requires planning, critical thinking, financial planning and much more, it’s basically a journey. So, if you ask me what’s Shift Left approach? I would say “Thinking one step before”. Yes, start thinking of accessibility a one step before from where you now currently do; keep following this practice. As you keep progressing in a planned manner, I am sure you will get there one day wherein whenever you start with a product you will think Accessibility first!

For example, if you think during the Testing Phase, instead next time you think during the development phase. Similarly, if you think during the Development Phase, think during the Design Phase.

In this blog, we are going to understand why Design Systems are good catalysts of Shift Left approach.

What are Accessible Design Systems (ADS)?

In simple words, an accessible design system is a collection of reusable components, patterns/layouts, style guide, design tokens, and brand guidelines that are meeting the accessibility requirements. These systems incorporates accessibility principle and guidelines which can be assembled to build a section or an entire page that is accessible. It is a comprehensive framework that helps content writers, designers and developers maintain consistency, speed up the design and development process, and ensure quality along with accessibility across a product.

Some key aspects of an accessible design system:

1. Accessibility Guidelines and Standards: Incorporating established accessibility standards such as the Web Content Accessibility Guidelines (WCAG) into the design system. It is based on the 4 Principle of WCAG i.e. POUR – Perceivable, Operable, Understandable and Robust. This includes guidelines for color contrast, text size, keyboard navigation, non-text content, screen reader compatibility, and much more.
2. Inclusive Design Principles: Following the 7 Inclusive Design Principles.
   • Comparable Experience – Providing comparable alternative ways to users.
   • Consider Situation – Allow users to use the product in different situations.
   • Consistent – Using consistent patterns across the product.
   • Giving Control – Allow users to access and interact with the product in their preferred ways.
   • Offer Choice – Allow users with different ways to complete tasks, especially those that are complex or not standard ones.
   • Content Priority – In case of complex tasks, allow users to focus one thing at a time.
   • Adding Value –Consider adding features for users that adds value to user experience.
3. Semantic HTML: Using semantic HTML elements appropriately to enhance accessibility of the components and layouts. This includes using proper heading, lists, or table structure, landmarks to ensure that content is structured in a way that assistive technologies can understand, using Native HTML elements for interactive elements like buttons, links, input fields, drop-down and much more.
4. ARIA (Accessible Rich Internet Applications): Implementing ARIA roles, properties, and states to enhance the accessibility of dynamic content and complex UI components where standard HTML alone is insufficient.
5. Responsive Design: Ensuring that the design system supports responsive design so that components and layouts can adapt to different viewports.
6. Style Guide and Brand Guidelines: Ensuring the visual design elements such as colors, spacing, icons, typography are maintained along with brands visual and voice consistency.

Where does ADS fit in the Product Life Cycle?

When an Accessible Design System is in place it can be implemented from the very start of the Product Life Cycle i.e., Planning. One can plan from the very beginning about what colors to use, what icons to be used, what layout the site will look like, which components the page will consists of and much more! When you have such a roadmap in place the outcome of the product will be an accessible one.

Another thing about having an ADS in place mean, you can literally involve it in any of the phase of the Product Life Cycle. If you are already at the development phase, don’t worry, if your ADS is in place, you can reuse the components easily that will be accessible out of the box. One disclaimer here is that when you implement it on the actual page, ensure that you are doing it in an accessible manner. For example, if you are adding a form for the page, you might have components like input fields, radio buttons, checkboxes, and so on. It’s easy to forget to connect the labels with your fields while updating the IDs of the components. So, be cautious! Work consciously.

Maintenance & Reusability of ADS.

As technology keeps evolving, so does the accessibility requirements. You can’t keep your ADS that adhere to just WCAG 2.0 in a world where WCAG 2.2 exists. It’s like keeping your Windows at XP version wherein Windows 11 is already released and stable.

When a Design System is created, the maintenance for its effectiveness and applicability is a MUST! Some key aspects to ensure your Design System is up to date.

1. Testing and Validation: Periodic testing of components and patterns for accessibility using automated tools, manual testing, and user testing involving people with disabilities.
2. Accessibility Documentation: Clear documentation on how to use the accessible components and patterns, including best practices for ensuring accessibility in design and development. This helps in consistent implementation across the products.
3. Training and Resources: Offering required training for content writers, designers and developers to understand and implement accessibility.
4. Continuous Improvement: Treating accessibility as an ongoing process. Remember it’s a journey! This means continuously updating the design system to address new accessibility challenges, user feedback, or any advancements in accessibility standards and technology.

How does ADS benefit in your Accessibility Journey?

You might ask why to use an ADS? The answer is simple, it has MANY benefits.

Some of the benefits are as below.

1. The most important aspect of having an ADS is ensuring Inclusive User Experience.
2. Many countries have regulations and laws that requires digital products to be accessible. ADS helps in meeting the Legal Compliance requirements.
3. Along with Accessibility, Usability is also enhanced for your Product.
4. Making your product accessible means reaching out the broader audience by showing commitment towards inclusion. This indirectly reflects a positive brand image.
5. Integrating accessibility from the beginning reduces the cost and time for retrofitting it later.
6. It helps to bring consistency and efficiency in your product.
7. Helps in keeping you future-proof by ensuring you can adapt to new accessibility standards and requirements.

Conclusion

The Shift left approach helps meet your goal towards being inclusive. Along with legal requirements — it’s also about creating digital experiences that are welcoming and usable for everyone. By embedding accessibility into the core of your design systems, you can build products that reflect a commitment towards inclusivity, ultimately leading to a more equitable digital world.

Remember, accessibility is a journey, not a destination. Start early, involve everyone, and continually strive to create inclusive experiences that make a difference.

This article by Fahad Lambate is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.