Mobile Accessibility Optimization for Xianyu's Flutter & Native App

Recently, Xianyu (Alibaba's second‑hand marketplace) launched accessibility support for its Android and iOS clients, serving over 1.7 million users with visual impairments.

This article reveals how accessibility was integrated into a Flutter‑Native hybrid project and how the team maintains stable support during frequent version iterations.

Accessibility as a normalised process

Rather than creating a separate app for disabled users, the team embeds accessibility into the mainstream product, keeps the original UI and interaction flow, and treats accessibility as a regular development item. A systematic workflow covering product design, implementation, testing and monitoring ensures continuous support.

Development workflow

Product requirement stage: consider special‑group usage habits in design.

Technical development stage: follow optimization specifications, make all non‑decorative interactive elements focusable and properly described.

Product testing stage: verify the effect and involve professional accessibility testing teams.

Product launch stage: monitor usage by accessibility users and collect feedback.

Client‑side accessibility guidelines

Decorative elements do not need independent focus.

All non‑decorative interactive elements must be focusable and provide role, description and state.

Images, audio and video should have content descriptions.

Minimum focus area: at least 48 × 48 dp.

Checkboxes and tags must expose correct state.

Logical focus order to avoid jumps.

Avoid removing functionality for difficult‑to‑fix issues.

Android optimization

android:contentDescription="desc"

view.setContentDescription(desc)

android:importantForAccessibility="no"

view.setImportantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_NO)

android:accessibilityTraversalAfter="id"

android:accessibilityTraversalBefore="id"

view.setAccessibilityTraversalAfter(int)

view.setAccessibilityTraversalBefore(int)

iOS optimization

@property (nonatomic, copy) NSString *accessibilityLabel;

@property (nonatomic) BOOL isAccessibilityElement;

@property (nonatomic) UIAccessibilityTraits accessibilityTraits;

Flutter optimization

Semantics(value: "desc", child: Row())

ExcludeSemantics(child: Row())

MergeSemantics(child: Row())

Weex optimization

<div aria-label='desc'></div>

<div role='button' aria-label='desc'></div>

<div aria-hidden='true'></div>

During the accessibility overhaul, 18 engineers fixed 129 issues across four versions, achieving an 87.5 % fix rate and serving more than 40 000 visually‑impaired users on Xianyu.

The team invites the community to share suggestions and continue improving app accessibility for special‑group users.