>

Embedding accessibility into design system components

Professional
Accessibility
Design System
Company
Role
Timeline
Tools
With
Paramount+, a streaming platform
Product design,
UX research
10 weeks
Figma, Google survey
1 x design mentor.
PMs, A11y team, devs, researchers.

Summary

When designing for local libraries, designers do not consistently check if their designs align with WCAG 2.2 AA compliance. Recognizing this issue, I took the initiative to develop comprehensive accessibility guidelines at the component level. These guidelines empowered designers to proactively ensure accessibility compliance in their work before handing it off to developers, thereby promoting early recognition of accessible design principles. This initiative influenced the daily workflow of about 25 product designers.
[intentional blur] Parts of final deliverables

Business goals

• Less time spent in QA
• Reduce chances of web accessibility lawsuit

User goals

• Incorporate accessibility principles in design
• Collaborate with devs and QA engineers efficiently

Project goals

• Accessible local design library
• Designers handle accessibility issues properly
• Shared accessibility vocabulary
• Easier collaboration between designers & developers

KPIs

• Reduce number of accessibility tickets
• Developers spend less time spent in accessibility QA
Role

A11Y focused designer

During the summer, I collaborated with both the Voyage Design System Team (VDS) and the accessibility team at Paramount+. My role entailed leading the creation of comprehensive web accessibility guidelines in alignment with WCAG 2.2 AA standards and proposing systematic workflow changes that involved the VDS team, Paramount+ product designers, the product team, and the accessibility team.

Based on the principle of atomic design, this project focused on web accessibility at molecules (simple components) and organisms (relatively complex components) levels.
Target users

Product designers with differing levels of accessibility knowledge

Within Paramount+, the design system team oversees a unified design system that spans the entire platform. design system designers play a crucial role in guiding the design process and ensuring accessibility standards are met. However, alongside this centralized system, individual design teams maintain their own local design libraries, tailored to their unique needs. Product designers outside of the design system team, responsible for these local libraries, may lack a standardized understanding of accessibility, resulting in varying levels of expertise across teams.
In local design library, product designers have greater ownership
Users’ pain points

Inconsistent accessibility compliance checks in design

"How might we ensure product designers are consistently and independently addressing any accessibility issues when designing components in their local libraries."

Solutions

A new workflow for product designers

The proposed workflow emphasizes that designers should consistently consider accessibility throughout all stages of their work. It also involves using artifacts such as guidelines and checklists.

Guidelines that tailored for product designers

In collaboration with the accessibility team, I spearheaded the development of guidelines. These accessibility guidelines, tailored for designers, offer a design perspective on accessibility and provide detailed visual examples to translate understanding into design decisions.

A checklist that serves as a reminder

Alongside the acceptance criteria in the proposed workflow, this checklist serves as both a reminder and a reference tool for designers when working on accessibility in component design.
Discovering the story behind
01 Evaluate
Evaluate
Hypothesize
Explore
I was tasked with ‘enhancing accessibility in the design system’, a seemingly vague assignment. To address this, I started by assessing existing resources, encompassing both industry and existing company practices.
Companies assess accessibility with 6 aspects
In my research, I studied various companies to comprehend their methods for creating web-accessible components. Presently, industry companies utilize 6 distinct aspects to characterize accessibility.
These are 6 important aspects in accessible design.
Evaluating accessibility status through automated and manual audits
Paramount currently has internal audit guidelines that incorporate the 6 key aspects mentioned earlier.
While the 6 aspects aren’t all design-specific, I identified 3 key aspects—interface zoom support, keyboard support, and visual characteristics—using a 2x2 matrix to emphasize designers’ involvement at the component level.
On component level, designers' responsibilities are 3 aspects.
Using the current audit guidelines, I conducted an accessibility audit, including automated and manual tests, revealing multiple failures.
Automated test results
All 30 failed instances in the automated test are HTML violations, which are relatively easy for developers to address. I decided to focus more on manual test results.
Manual test results
6 components were undergoing auditing, resulting in a total of 17 failures. Among these, 4 are attributed to designers' responsibilities.
These 4 instances pertained to keyboard support and interface zoom support, highlighting the need for designers' recognition and collaboration between designers and developers.

02 hypothesize
Evaluate
Hypothesize
Explore
Following the accessibility audit, I conducted interviews with 3 product designers to understand their experiences. I then developed a hypothesis for the failures based on the audit and interview insights. This hypothesis was validated using data from a survey that included 18 designers, representing 72% of the team.
Analyzing failed instances through interview insights
I interviewed 3 designers to gain deeper insights into their perspectives of accessible design and design processes. From these interviews, I obtained 4 key insights.
Insight 1
3 out of 3 designers acknowledged the importance of accessibility in component design.
Insight 2
0 out of 3 designers were familiar with terminologies such as "keyboard support" and "interface zoom support".
Insight 3
1 out of 3 designers knew how to verify keyboard support and interface zoom support when designing accessible components.
Insight 4
Keyboard support and interface zoom demand closer collaboration between designers and developers. However, designers often assumed developers would address these aspects.
I hypothesize that audit failures stem from designers’ difficulty in effectively implementing accessibility guidelines, due to a discrepancy between their intentions and actions.
Metrics:
❶ Percentage of designers who consider accessibility principles during component design.
❷ Percentage of designers who actively implement accessibility principles in component design.
Validating the hypothesis with survey insights
The survey included 18 participants, representing over 72% of designers. The recruitment criteria ensured a diverse range of perspectives by including designers with various levels of accessibility knowledge.
The survey results highlighted a notable misalignment between designers' intentions and actions in component design.
Designers' "think and do" towards responsiveness
03 explore
Evaluate
Hypothesize
Explore
Upon hypothesis validation, I undertook 4 interviews and usability tests to investigate misalignment causes, revealing accessibility integration challenges for designers. Insights from these interviews prompted a workshop with diverse participants for solution brainstorming. This collaboration resulted in accessibility guidelines, a checklist, and a designer workflow specifically designed for enhancing component-level accessibility.
Revealing pain points through interviews and usability tests
From insights of 4 interviews and usability tests, I created a cognitive flow for designers crafting accessible components, identifying unique pain points at each stage.
Leading a workshop for group brainstorming to devise solutions
To gather a diverse range of perspectives, I invited product managers, design system designers, managers, product designers and accessibility team members for the workshop.

Guidelines
The guidelines present accessibility principles from a designer’s perspective, their importance, and use cases with visuals.

It tackles challenges in: ❶ accessing a11y resources, ❷ interpreting a11y principles, and ❸ integrating a11y principles in design.
A checklist
The checklist integrates with the guidelines to streamline designers’ workflowtackles challenges in integrating a11y principles in design.
A updated designers' workflow
The checklist ensures proper incorporation of accessibility compliance, and it tackles challenges in integrating a11y principles in design.
Thanks for reading this case study

Please feel free to reach out for more details

If you would love to learn more about the process and details, please don't hesitate to reach out!