Scaling Accessibility

Overview / Context

The global design system supports a large network of international, franchise-based marketing sites. Because these sites serve diverse audiences across multiple regions, they must meet a range of regional digital accessibility requirements that extend beyond U.S.-centric standards.

In mid-2023, one international market identified significant accessibility gaps that prevented their localized site from meeting required standards. While the issue surfaced at a regional level, it revealed a broader system-level challenge: core design system components were not consistently WCAG-compliant.

As a lead UX designer on the design system, I was asked to lead a multi-month initiative to modernize the system, remediate accessibility gaps, and establish a sustainable, accessibility-first foundation that could support compliance across global markets.

Problem / Opportunity

What originally appeared to be a regional compliance issue exposed a greater systemic risk. The design system lacked core accessibility standards, which posed increasing compliance risk as its use expanded across global markets.

Goals & Approach

Goals

• Enable international sites to meet WCAG AA standards
• Remediate the most frequently used and highest-risk design system components
• Embed accessibility into the system’s core principles and workflows
• Equip regional teams with accessible, reusable modules they could confidently deploy

Approach

1. Partner with external accessibility experts for auditing, guidance, and validation
2. Prioritize high-traffic and high-usage modules for immediate remediation
3. Collaborate across design, engineering, and product through agile sprints
4. Validate all remediated components prior to release

Design System Principles Introduced:

• Accessibility-first thinking
• Consistency across markets
• Scalable, future-ready patterns
• Strong cross-functional collaboration

Process

1. Audit

We began with a comprehensive audit of the most commonly used design system modules. Components were evaluated using a combination of automated scans and manual WCAG reviews.

The results revealed both surface-level issues and deeper structural gaps that required refactoring, and not just visual fixes alone.

Findings were organized into:

• Quick Wins: Contrast corrections, font size adjustments, missing alt text, incomplete ARIA labels.
• Structural Issues: Interaction patterns, focus management, semantic hierarchy, and keyboard traps.

2. Prioritize

Components were prioritized based on:

• Severity of accessibility violations
• Frequency of use across global markets
• User impact
• Implementation complexity
• Compliance risk for specific regions

High-risk, high-usage components were addressed first, with lower-impact items added to a longer-term roadmap.

3. Define Requirements

Before redesigning any module, clear accessibility and functional requirements were documented, informed by:

• WCAG 2.1 AA standards
• Accessibility expert recommendations
• Engineering constraints and CMS considerations
• UX best practices
• Regional compliance considerations

Requirements were organized into categories including:

• Semantics & Structure (e.g., list vs. div structure, heading levels)
• Interaction Patterns (keyboard support, focus order, arrow behaviors)
• Content Requirements (alt text guidance, ARIA labels, descriptive text)
• Visual Standards (contrast minimums, spacing, type scale)

This step ensured that the cross-functional team was aligned before design work began.

4. Research

I conducted focused research to ensure design decisions would be grounded in best practices and user needs. This included:

Accessibility Standards & Best Practices
Reviewed WCAG 2.1 AA guidelines and patterns from accessibility-forward design systems to validate semantic structure and interaction patterns.

Benchmarking Industry Examples
Analyzing how similar components were implemented across trusted organizations to identify pitfalls and proven solutions.

User & Behavioral Insights
Referencing analytics and engagement data to understand how real users interacted with high-traffic modules and where accessibility issues created friction.

Assistive Technology Review
Documenting how components were announced by screen readers to uncover labeling gaps, missing semantics, and keyboard challenges.

Engineering Considerations
Validating constraints around CMS structure, localization needs, and technical feasibility to ensure designs were realistic and sustainable.

This research ensured every design decision was informed, intentional, and aligned with both user expectations and compliance standards.

5. Design & Iterate

I led the design updates for high-priority modules, including complex, high-traffic modules.

Through iterative design, I introduced improvements including:

• Defined content limits and clear start/end points
• Improved semantic structure for assistive technologies
• Clear navigation patterns with visible states
• Explicit labeling and guidance for accessible content
• Visual indicators that improved usability for all users

I partnered closely with engineering from design through development, sharing prototypes and interaction details, and participating in daily standups to ensure accurate implementation and rapid issue resolution.

6. Validate (QA + AT Testing)

After development, each module entered a rigorous validation process that combined:

Issues were tracked, resolved, retested until all acceptance criteria were met, before release approval.

7. Document

Once approved, I added each module back into the design system with:

• Updated usage guidelines
• Anatomy and behavior descriptions
• Accessibility requirements
• Dos and don’ts with examples
• Updated design assets

This ensured long-term consistency, clarity, and adoption across regional teams.

8. Release

Module releases followed a structured rollout plan:

• Updated design libraries and release notes
• Internal announcements and walkthroughs
• Optional office hours for review and guidance
• Staged deployment
• Post-release testing to ensure parity between design and production

9. Govern

To ensure ongoing compliance and prevent regressions, an accessibility governance model was established, including:

• Regular accessibility reviews of core components
• Validation requirements for new components
• Engineering checkpoints
• A centralized process for reporting issues or requesting enhancements
• Ongoing monitoring of regional requirements

Governance ensures that accessibility is no longer reactive — it is proactively maintained and embedded as part of the design system’s lifecycle.

Deliverables

• Remediated Components: Core components redesigned/rebuilt to be WCAG AA compliant.
• Documentation Updates: Revised system documentation for accessibility.
• Accessibility Guidelines: Internal checklist and training shared across product teams.
• Validated Compliance: External validation confirming AA-level compliance.
• Successful Relaunch: International marketing site restored to full operation and compliance.

Impact & Results

• Enabled an international site to meet required accessibility standards and return to active status.
• Empowered product team to build accessible products with confidence and consistency.
• Improved usability for users with and without disabilities
• Established accessibility as a core design principle for the global system going forward.

“The updates didn’t just bring us into compliance — they made our design system better for everyone.”

– Product Manager

Reflection

This initiative completely reshaped how I think about inclusive design.

Key Takeaways:

• Build it right from the start – Retrofitting accessibility is far more time-consuming than designing for it initially.
• Audit regularly – Continuous monitoring prevents regressions and regional compliance issues.
• Accessibility = good design – Improvements that help one group of users typically improve usability for all.
• Transparency drives success – Open communication throughout the process was crucial for alignment and delivery.

Before this project, my accessibility expertise was surface-level. By the end, I was confidently leading reviews, mentoring peers, and ensuring accessibility became a shared responsibility across disciplines.