Building an Accessible Design System at CNN
I collaborated with the WBD accessibility team to identify and address major accessibility challenges in the CNN app, including incorrect link targets, small tap areas, insufficient color contrast, and hard-to-navigate carousels. By ensuring our solutions met WCAG standards, we enhanced the app’s usability for people with disabilities, those experiencing temporary impairments, and all users making daily news more accessible and inclusive for everyone.
11min read
Role
Product Design Intern
Timeline
2024-2025
Team
Background
Chris is an avid cyclist who, one day, broke his finger during a cycling incident. After receiving a splint from the doctor, he realized that he had difficulty performing gestures and navigating his phone. He found that turning on VoiceOver (iOS’s native screen reader) helped him use his phone more effectively.
However, when Chris tried to get his daily news from CNN, he encountered many problems, such as incorrect link targets and focus order, color contrast issues, lack of alt text, and inaccessible tap target sizes. Although Chris doesn't exist, his experience reflects the challenges many people face when they find themselves living with a disability.
Current Experience
From conducting an accessibility audit, I found that this is what the current CNN experience is like for disabled and affected individuals.
Long Horizontal Scrolling Lists
Incorrect link-targets
When screen reader users attempt to navigate to a shorts video, they are directed to an incorrect link.
Use of color
When colors are used as the sole method for identifying screen elements, controls, or giving instructions, persons who are blind, color blind, or have low vision may find the web page unusable.
After identifying barriers to entry, I focused on solving them from a design perspective and implementing solutions. By leveraging design systems, I was able to create scalable and predictable solutions to these accessibility problems.
Research
1/8 Americans are considered permenantly disabled.
Source: Annual Report on People with Disabilities in America: 2025
1/3 Americans will face a disability <65 years old.
Source: Annual Report on People with Disabilities in America: 2025
HMW
How might we reduce barriers to entry and address accessibility challenges within the CNN app to ensure a more inclusive experience for all users?
Solution
I audited 5 components in the Zeroheight Design System, identifying and supporting the remediation of 4 accessibility issues.
Before
After
I also created accessibility documentation within Zeroheight Design System for 7 components, guiding designers to use components in accessible ways.
While I couldn’t review all 70+ components, the 5 I audited now pose fewer barriers for CNN's estimated 7.5 million users with disabilities (15% of the platform’s 50 million users).
Enter Password
Hint: If you are a recruiter, try 'recruiter'