AccessU 2025, Austin, TX, USA
Shifting Left: How designers can drive accessibility before development starts
At Knowbility's John Slatin AccessU 2025 conference, we presented "Shifting Left," chronicling our journey from discovering a massive, hidden accessibility debt to building a proactive, design-led framework.
A case study in Shifting Accessibility Left
"Shifting Left: How Designers Can Drive Accessibility Before Development Starts," was a case study in transforming our approach to accessibility from a reactive afterthought to a proactive, design-led strategy.
The Core Problem: An Iceberg of Hidden Debt
Our journey began with a flawed assumption: that our accessibility issues were minor, merely the "tip of the iceberg." Beneath the surface lay a much larger problem: dozens of legacy products, inconsistent technical patterns, millions of users with diverse needs, and a complete lack of accessibility governance or ownership.
The Turning Point: The "Oh Sh*t" Moment
The true scale of our challenge became clear when we realized we had over 60 customer implementations with zero accessibility audits. This triggered an "Ethical Gut Check," forcing us to question our responsibility and look beyond legal compliance toward the moral imperative to build experiences for everyone.
- Simranjit Singh, during the talk"You don't have to be a lone wolf in the fight for accessibility. Find allies, train your teams, and build a shared understanding. Accessibility isn't just a UX job - it's everyone's responsibility."
From Panic to Practice
A New Framework
Instead of succumbing to panic, we chose to prioritize. We moved "From Panic to Practice" by developing a framework to navigate the chaos. First, we focused on understanding the massive scope of the work, which involved dozens of products, three core user types (Admin, Business, and Consumer), and no existing map to guide us. We then established a four-level triage system to systematically prioritize the most critical issues.
Figma Design Annotations and Documentation
To truly implement our "shift left" philosophy and place accessibility at the heart of our product, I designed and launched a comprehensive Accessibility Annotation Library in Figma. This library serves as a standardized toolkit, available to all our designers, to ensure that accessibility is a core component of the design hand-off. We have formally integrated this into our process by making these annotations a mandatory part of our "Definition of Done" for design. Designers now annotate all key accessibility behaviors, including: descriptive link names and alternative text for images to meet WCAG 2.1 Success Criterion 1.1.1 (Non-text Content); a logical tab order for keyboard navigation to fulfill Criterion 2.4.3 (Focus Order); and sufficient color contrast to meet Criterion 1.4.3 (Contrast (Minimum)). The library also provides components to specify page landmarks, focus management for dynamic elements, and how search results or status updates should be announced by screen readers.
Ripple Effect
The introduction of this library has created a ripple effect of efficiency and quality across our entire product development lifecycle. It has standardized the process, making life significantly easier for developers who now receive unambiguous, actionable accessibility requirements directly within the design files. Our QA testers are also equipped with a clear checklist of what to validate, allowing us to catch and fix potential issues during development. This proactive approach means we are no longer depending on our end-users to report accessibility barriers; we are resolving them before they reach production, avoiding costly fixes late in the cycle. To support this initiative, we also authored and centralized a set of accessibility guidelines to document our best practices and the reasoning behind key decisions, ensuring a sustainable and scalable culture of accessibility for the future.
Data-Driven Audits: A standardized Tracking Framework
To bring a structured and data-driven approach to our accessibility audits, we developed a comprehensive tracking system using an interconnected Excel spreadsheet. This tool was designed to standardize the auditing process and provide a clear, high-level overview of our product's compliance status. The framework consists of interconnected sheets, including a detailed view for auditors and a summary dashboard for stakeholders. The detailed audit sheet serves as a powerful reference tool, containing a comprehensive list of all WCAG criteria, along with their descriptions and conformance levels (Level A, AA, or AAA).
During an audit, each WCAG criterion is methodically assessed and assigned one of the following clear statuses:
- Support
- Partially supports
- Not supported
- Cannot tell
- Not applicable
- Not checked
To ensure clarity and create an actionable record for our development teams, each finding must be accompanied by detailed notes explaining the reasoning and the precise location of the issue within the product. The data from these detailed findings automatically populates the overview sheet, which provides a live, at-a-glance summary of our product's accessibility health. This methodical approach standardizes our auditing process, removes ambiguity, and allows us to effectively track progress and prioritize fixes.
A Design-Led "Shift Left" Process
As part of the initiative, I designed and implemented a new workflow to embed accessibility directly into the design process from the very beginning. The process includes:
- Designing with A11y Annotations: All designs are annotated before handoff.
- Handoff to Development: Developers receive clear, actionable guidance.
- Validate / Audit: We created a loop for designers and developers to validate work before it progresses.
- VPAT & Release: The product only moves to the final stages after accessibility has been confirmed.
Impact and Lessons Learned
Impact
- Within a single year, the team successfully transitioned from a state of "panic" to a structured "plan".
- The process moved the organization from "unaware & underprepared" to "process formation & ownership".
- This resulted in tangible change driven by annotating designs and implementing dev-first audits.
Key Lessons Learned
- Don't Panic, Prioritize: The most effective approach is to prioritize and start where it matters most.
- Find Your Allies: Locating an "unexpected ally" is crucial for building support.
- Train Everyone: To achieve lasting change, it is essential to train everyone involved.
- Lead with Ethics: The commitment to accessibility should be guided by ethics, not just legal requirements.
- Redefine "Done": Make accessibility a non-negotiable part of your team's "definition of done".
About the Speakers
Gallery
