ROLE
-
Built an accessibility-first design system from scratch.
-
Designed the editor interface following WCAG guidelines and integrated built-in accessibility tools.
TEAM
-
1 Senior Product Designer
-
1 Product Designer (me)
-
1 Engineering Manager
-
3 Senior Engineers (during the early stages)
-
1 QA
The Accessibility Gap
According to Level Access' 2023 State of Digital Accessibility Report, 75% of organizations want to improve digital accessibility but have too many competing demands and time constraints.
Businesses and organizations are facing challenges in creating accessible digital content due to the lack of proper accessibility support in digital design tools. We’ve also received increasing feedback from users, especially regarding compliance with standards like WCAG, ADA, and Section 508. If these challenges aren’t addressed, we risk not only failing to meet accessibility standards but also losing valuable customers.
PROBLEM
Listening to Users
Working with a senior designer, we conducted 13 discovery calls with our target audience, accessibility experts, and screen reader users to gain insights into their needs, challenges, and perspectives on accessibility.
Users in corporate, government, and educational sectors create accessible documents for both internal and external communication to ensure inclusivity, comply with legal requirements, and support workplace accommodations. While they understand the importance of accessibility, they lack expertise and struggle to balance it with operational constraints.
Key challenges in their workflow:
-
Accessibility as an afterthought, relying on third-party tools like Adobe Acrobat Pro DC and CommonLook PDF validator for accessibility checks, leading to long remediation process.
-
Overwhelming guidelines, leaving users unsure if the implementation is correct.
-
High costs of accessibility vendors and platforms.
We've identified 3 key persona:
Darron Mitchell
The Business-First Executive
ROLE
Operations Director at a multinational corporation
GOALS
Improve team productivity, ensure profitability, and mitigate legal risks.
VALUES
Supports accessibility when it aligns with business goals, reduces liability, or enhances brand reputation.
CHALLENGES
Struggles to balance accessibility with budget constraints and business priorities.
Catherine Johnson
The Accessibility Advocate
ROLE
University Administrator focused on inclusivity
GOALS
Ensure 508 compliance in university materials and advocate for better accessibility policies
VALUES
Believes accessibility is crucial for education but lacks in-depth technical expertise.
CHALLENGES
Faces difficulty implementing accessibility due to limited institutional support, complex guidelines, and resource constraints.
Zeo Anderson
The Screen Reader User
ROLE
Accessibility Specialist at a government agency, relies on screen readers.
GOALS
Access and create digital content easily, perform tasks efficiently, and advocate for better accessibility.
VALUES
Sees accessibility as a fundamental right and expects all digital content to be screen reader-friendly
CHALLENGES
Struggles with poorly structured documents and inaccessible PDFs, causing delays and frustration in completing tasks.
How might we...
empower all users to create and interact with accessible digital content?
User Objective
Help users create accessible documents seamlessly throughout the design process, eliminating the need for post-creation checks or reliance on external tools.
Business Objective
Expand our market reach, attract leads from sectors that require compliance (such as government, education, and healthcare), promote social responsibility, and future-proof our business.
User Objective
-
Acknowledgment of compliance with Section 508
-
Increased engagement with accessibility tools and higher user satisfaction among those who prioritize accessibility
-
New accessibility leads from industries with compliance needs
Design
process
Building an Accessible Design System
Instead of simply adding accessibility features to our existing tool, we undertook a major redesign and re-engineering of our editor to make it accessible from the ground up. Accessibility became a core principle, embedded in every aspect of the design and functionality.
As a designer, one of my key contributions to this project was introducing a new design system built on accessibility principles. This system standardized:
-
Color palettes that meet WCAG 2.1 AA standards.
-
Typography and iconography optimized for legibility.
-
UI components with clear hover, focus, and active states.
-
Guidelines for accessible design best practices and component usage.
This system enhanced consistency, efficiency, and inclusivity across all Venngage products. I also played a crucial role in guiding peers on component building, using variables, and effectively utilizing the design library.
Modernizing the Interface
Building on this foundation, I revamped the editor interface to improve usability, featuring a clean, light UI that enhances readability and offers a larger editing workspace. I ensured a consistent look and feel while adhering to WCAG Level AA standards for accessibility.
Before
-
General and editing controls were cramped in a small bar.
-
Button styles were inconsistent.
-
The narrow sidebar menu made browsing and searching for assets challenging.
After
-
Clear separation between the navbar (use for document settings) and the toolbar (use for design editing).
-
Streamlined context toolbar ensures quick access and improves option findability.
-
Larger sidebar menu with thumbnails for better browsing and searching experience.
.webp)
Integrating Accessibility
Instead of viewing accessibility as an external add-on, we aimed to guide users toward making accessible design choices. We pinpointed two key moments where accessibility could to be woven into the process:
-
During the design process: Users receive real-time guidance (e.g., contrast checking, alt text suggestions) without interrupting their workflow.
-
After the design process: The final Accessibility Checker ensures that designs are fully compliant before publishing.
Spotlight 1:
Contrast checker
One of the most common accessibility issues is low color contrast, which affects readability for users with visual impairments. Traditionally, users would need to manually check contrast ratios, an extra step that few took.
I designed a real-time contrast checker embedded within the color picker. If contrast levels were too low, users received an in-context message with direct recommendations for better contrast choices. This allowed users to make informed decisions as they adjusted the colors.
Wireframing & Exploration
I explored multiple ways to present contrast information within the color picker to help users make accessible color choices:
-
Real-time contrast preview with WCAG AA levels and contrast ratio.
-
Contrast borders as visual cues to improve affordance.
-
Accessible range within the color picker UI.
-
A quick access to the visual simulator.
.webp)
Usability Testing
To validate my design choices, I ran moderated and unmoderated usability sessions with 8 participants. It became clear that many users felt overwhelmed by the color menu.
Key Findings
-
Most users preferred to visually inspect color changes on the canvas, often ignoring contrast previews.
-
The color menu created information overload, with too many elements competing for attention.
-
Advanced users appreciated detailed contrast data, most users didn't engage with it.
Iterations: Simplifying Complexity
In the next few iterations, I focused on simplifying the layout and making contrast guidance easier to follow:
-
Replaced technical WCAG terms with simple, intuitive labels: “Low contrast,” “Good contrast,” and “High contrast.”
-
Removed rarely used controls like RGB inputs to reduce clutter.
-
Kept in-depth contrast details hidden but accessible for those who want more information.
Spotlight 2:
ALT TEXT GENERATOR
Many users requested the ability to add alt text to their visuals for better accessibility. To address this need, I designed an alt text editor that allowed users to add descriptions to icons and images.
The initial alt text editor was only accessible through the toolbar, which wasn't immediately discoverable. The modal also obscured the image, preventing users from seeing what they were writing about. This disconnect made it harder to write accurate and meaningful alt text.
Iterations:
Leveraging AI to Enhance Accessibility
After launch, I got feedback that many users had trouble writing good alt text. In response, I introduced several improvements in the next version:
-
An AI alt text generation tool that can create descriptions with a single click.
-
An in-context modal that keeps the image visible while editing.
-
Alt text tags above images for quick access and encourage interaction.
These updates with in-product nudges, led to a 12% increase in alt text usage and improving overall accessibility. This also reflects a broader trend—AI is becoming an essential driver in making accessibility more approachable and scalable.
Spotlight 3:
ACCESSIBILITY CHECKER
Many accessibility tools only identify issues, but they don’t tell you how to fix them. Working with the senior designer, we designed an all-in-one accessibility checker that actively guides users through the remediation process. Our checker includes:
-
Automated audits that detect and highlight accessibility issues.
-
Detailed recommendations with step-by-step instructions for remediation.
-
A reading order editor to restructure documents for better compatibility with screen readers.
-
A visual simulator that lets users experience designs from the perspective of individuals with color blindness or vision impairments.
.webp)
Version 1:
An Overwhelming Checklist
The initial version of the accessibility checker aimed to combine automated audits and manual checks in a single workflow. While functional, user feedback revealed several pain points:
-
No clear distinction between auto-detected issues and manual checks.
-
A cluttered accessibility checklist that felt overwhelming.
-
Unclear icons with not enough context.
These issues made the remediation process feel confusing and cumbersome.
Version 2:
Clarity, Structure, and Feedback
In the second version, we focused on simplifying the experience. The workflow was reorganized into three clear sections:
-
Fix auto-detected issues
-
Perform manual checks
-
Confirm document settings
To help users track progress, we added a live-updating status bar to show remaining issues, giving users instant feedback as they fixed problems. A follow-up test validated that this update made the remediation process clearer and less overwhelming.
.webp)
.webp)
Challenges &
solutions
Like any ambitious project, we faced challenges along the way. Our MVP editor fell short of expectations. The early designs included every detail for accessibility—guidelines, best practices, and instructions—but users felt overwhelmed during alpha testing and didn’t know where to start. Based on this feedback, we quickly we refined our approach and made improvements to address the following challenges:
Initial accessibility features were packed with complex details and guidelines, leaving users overwhelming.
Solution: Reframed accessibility as an assistant, using plain language instead of compliance jargon, and break down process into manageable steps.
01
Information Overload
It's time-consuming for users to fully understand the best practices and apply fixes manually.
Solution: Leveraged automation and AI to simplify the process. For example,
generating alt text with a single click, making accessibility faster and easier.
02
Demand for Manual Fixes
Users unfamiliar with accessibility struggle to implement best practices correctly and lack confidence when creating accessible content from scratch.
Solution: We lowered the barrier with ready-made, fully accessible templates, allowing users to create inclusive designs with ease.
03
Barriers to Getting Started
IMPACT
Achieved WCAG AA Compliance
Prioritizing digital accessibility reinforced Venngage’s position in inclusive design tools. Our efforts earned us a VPAT (Voluntary Product Accessibility Template) that strengthened our reputation and built trust with key industries like education, healthcare, and nonprofits.
See Compliance Report: Venngage VPAT (2024)
Increased engagement with accessibility tools
15% of users interacted with these features during their first session, and 20% of users created accessible designs after registration. Enterprise and business users have also shared positive feedback on our accessibility efforts.
Generated Accessibility Leads
Generated 50+ Accessibility leads in 3 months of the release, expanding our reach and attracting users who needed accessible design solutions. Accessibility became a competitive advantage!
Learnings
Design with Accessibility in Mind
Accessibility isn’t just a checklist—it’s a mindset. The biggest takeaway from this project was that accessibility is not only about legal compliance; it’s about integrating inclusivity into the product lifecycle to create a better experience for all users.
Co-creating with Users
By talking to users, I gained insight into how they approach accessibility and experienced it from a screen reader’s perspective. This allowed me to tailor solutions that were intuitive and user-friendly, bridging the gap between best practices and real-world implementation.
Take Ownership and Continuously Learning
While working on the new editor, I identified an opportunity to redefine the product's visual language and took ownership of the design system. This initiative not only improved the design workflow but also helped me enhance my skills in Figma and grow as a product designer.