>
Improving Accessibility
for 2M+ Weekly Users
Project Overview
Contributed to a cross-team accessibility initiative by leading component-level improvements across navigation, footer, and content structure.
*
Brought CTV News to AODA and WCAG 2.0 AA compliance within two quarters.
*
Collaborated across design and front-end to implement accessible solutions within a legacy codebase.
*
Improved keyboard navigation, focus states, and content structure to make critical news content accessible across devices.
Role
Front end Developer, UX Designer
Tools
HTML, CSS, Javascript, Jira, Confluence
Year
2024-2025
)
The Challenge
Complexity and Scale
CTV News operates on a large, evolving platform with inconsistent components, legacy code, and multiple content structures. Accessibility issues were systemic and spread across the site. We needed to address the root causes so solutions would scale across the platform.
*
Key Insight
Accessibility issues were caused by inconsistencies across the system.
Solving them required standardizing patterns, not fixing isolated screens.
)
The Process
Evolving Constraints
Accessibility improvements could not be fully defined upfront due to backend dependencies, legacy code, and dynamic content distributed across multiple CMS platforms including AEM and Polopolis.
*
Working Iteratively
A sprint-based workflow enabled launching accessibility fixes incrementally, prioritizing high-traffic pages while adapting to a complex platform that required frequent deployments.
*
User Testing Insights
Usability testing with a keyboard-only user revealed a critical issue: the footer created a keyboard trap that prevented users from continuing through the site.
>
>
>
Component Redesign: Footer
The existing design lacked a clear information hierarchy, was not fully responsive, and relied on inconsistent HTML structures. I pushed to expand the fix into a full structural redesign.
)
Information Hierarchy
I rearranged the HTML structure to remove keyboard traps and updated the CSS token calls to ensure the component remained consistent with the rest of the site.
)
Mobile Responsive
I expanded the scope of the redesign to adapt the component across devices. Improved responsiveness ensure mobile users can access critical news content with ease.
)
Footer Redesign
Before
After
Header Structure
While standardizing heading hierarchy, I found duplicate H1 tags caused by ad placements within legacy templates.
What appeared to be a simple one-person fix became an cross-team effort. I worked with analytics and development, to preserve ad performance while restoring an accessible structure aligned with SEO and business goals.
*
Cross-Team Trade-Offs
The root cause of duplicate H1s was a homepage ad banner conflicting with content hierarchy.
I worked with analytics and development to balance both user and business needs.
)
Duplicate H1 Came From Legacy Code templates
Component Redesign: Rotators
Rotators were built on an outdated library that limited keyboard navigation and made additional content difficult to discover.
I migrated them to an accessible, mobile-first library and added directional indicators as visual affordances to signal additional content. This improved consistency across devices and resolved the navigation issues caused previous implementations.
*
Key Insight
The technical issue caused a behavioural one. The lack of expected affordances (navigation arrows) meant it wasn't immediately obvious there was more content.
Visual cues made the component more accessible and predictable.
)
Adding Visual Cues
Before
After
)
Results & Impact
AODA and WCAG
Compliance
2M+ weekly users now have access to WCAG 2.0 AA compliant experiences
*
Key Takeaway
Accessibility at this scale requires addressing systemic issues across shared components.
Mobile
Experience
Made critical news content accessible and navigable on mobile, where the majority of traffic occurs as 60% of website users accessed content on a mobile device.
*
Key Takeaway
Designing for mobile devices ensures critical content remains accessible and usable where most users engage.
System-Level
Improvements
Standardizing accessibility patterns created a more consistent experience across a complex component library, with hundreds of pages hosted across multiple CMSs.
*
Key Takeaway
Standardizing patterns across components requires close collaboration across design, development, and stakeholders to create consistent, reliable experiences.