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

Horizontal scrolling lists and carousels are challenging for screen reader users, as they must navigate through each item individually, unlike sighted users who can easily skip ahead.


Horizontal scrolling lists and carousels are challenging for screen reader users, as they must navigate through each item individually, unlike sighted users who can easily skip ahead.


Horizontal scrolling lists and carousels are challenging for screen reader users, as they must navigate through each item individually, unlike sighted users who can easily skip ahead.


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).

Accessibility

I'm committed to making this website fully conformant with WCAG 2.2 level AA. This site relies on HTML, WAI-ARIA, and CSS to work with combinations of assistive technologies and web browsers. If you wish to report an access barrier or have any access requirements, please contact me and I will address it promptly: thomasmccluskey@proton.me

Accessibility

I'm committed to making this website fully conformant with WCAG 2.2 level AA. This site relies on HTML, WAI-ARIA, and CSS to work with combinations of assistive technologies and web browsers. If you wish to report an access barrier or have any access requirements, please contact me and I will address it promptly: thomasmccluskey@proton.me

Accessibility

I'm committed to making this website fully conformant with WCAG 2.2 level AA. This site relies on HTML, WAI-ARIA, and CSS to work with combinations of assistive technologies and web browsers. If you wish to report an access barrier or have any access requirements, please contact me and I will address it promptly: thomasmccluskey@proton.me

built by Tom McCluskey ©2025

Work in Progress

This case study is not mobile-responsive at the moment, please view on desktop.

Enter Password

Hint: If you are a recruiter, try 'recruiter'