How Youku Made Its Mobile App Accessible for Visually Impaired Users

Introduction

Although Android and iOS provide built‑in accessibility support, the growing complexity of mobile video apps requires deeper adaptation. Youku optimized its client for visually‑impaired users, sharing technical details and practical experience.

Professional Collaboration

Youku partnered with the Shenzhen Information Accessibility Research Institute, leveraging blind‑testing engineers to collect real user pain points, log bugs in the internal QA system, and verify fixes through professional testing.

Deep Adaptation and Experience Optimization

System‑level accessibility alone cannot meet ideal user experience. New technology stacks such as Weex, Flutter, and H5 introduced challenges like focus merging, missing content descriptions, and focus order chaos. Youku addressed these by refining focus handling, adding accurate content descriptions, and ensuring proper navigation sequence.

Typical Issues

Focus merging on video cards where image and text are read separately.

Lack of content description on many clickable components.

Focus disorder on player controls due to missing focus order.

Adaptation Scope

The optimization covered Android Native, iOS Native, Weex, Flutter, and H5 pages.

Business‑Layer Adaptation

Unified rendering architecture and a standard component library enabled systematic labeling of video tags, titles, descriptions, and ratings, making accessibility work more efficient.

Typical Solutions

Provide accurate contentDescription for icon buttons.

Set focus on outer containers for composite views.

Assign role attributes (button, link) to custom views.

Automatically switch focus to the first element in dialogs.

Offer voice prompts for state changes of toggle controls.

Deep Interaction Adaptation

When screen‑reader mode is active, the player control bar remains visible, touch focus is added, and spoken cues announce when the bar appears or disappears.

During portrait/landscape switches, accessibilityElements methods are overridden and interactive elements are sorted by coordinates to maintain logical navigation order.

Design Empathy Cases

Payment flow: consolidated focus, announced selected states, added description to the back button.

Login page: labeled “More login methods” as a button and announced collapse/expand state.

Half‑screen overlays: automatically moved focus to the overlay’s first element.

Conclusion

After a month of intensive work, Youku achieved a comprehensive accessibility upgrade for its main user flows, passing professional blind‑testing validation. Ongoing efforts will embed accessibility checks into regular development and expand to more screens, aiming for a universally inclusive video experience.