How DinamicX Enables Mobile Accessibility for Visually Impaired Users

Why Mobile Accessibility Matters

China has over 17 million visually impaired people, and they cannot enjoy the conveniences of the internet like most users. By leveraging technology, we can improve their experience, especially on mobile e‑commerce platforms.

What Is Accessibility?

Accessibility refers to removing barriers so that activities can proceed smoothly for people with permanent or situational disabilities, including visual, auditory, cognitive, and motor impairments.

The new definition emphasizes that every user intent must be understood.

DinamicX’s Role in Accessibility

DinamicX focuses on information accessibility, primarily for users with visual impairments, enabling them to receive and interact with app content seamlessly.

Taobao Core Pages Using DinamicX

Home, detail, cart, checkout, order list, and My Taobao pages are all rendered with DinamicX, making the SDK a critical component for accessibility support.

Technical Solution Overview

iOS Native Accessibility

Set isAccessibilityElement = YES on a view to make it focusable.

Provide accessibilityLabel for spoken description.

For parent containers, set isAccessibilityElement = NO and accessibilityElementsHidden = NO to let VoiceOver read child UILabel texts.

If nested parents have accessibilityElement = OFF, the root node’s label is read.

Android Native Accessibility

Three view states: no accessibility info, static info via setContentDescription, and interactive controls with both description and click listeners.

Parent‑child relationships affect focus and reading order.

System accessibility APIs are illustrated in the following diagrams:

DinamicX SDK Accessibility Attributes

To unify iOS and Android behavior, DinamicX introduces two attributes: accessibility (values: on, off, auto) accessibilityText (the spoken description)

These attributes simplify the developer’s work and ensure consistent behavior across platforms.

XML Example

<ImageView width="100" height="100" accessibility="on" accessibilityText="跳往详情页" onTap="@openUrl{'detail'}" imageUrl="https://img.alicdn.com/tfs/TB1FuMQQFXXXXXLXXXXXXXXXXXX-420-420.jpg" />

Template Example

<LinearLayout backgroundColor="#eeeeee" height="match_content" width="375" orientation="vertical" disableFlatten="true">
  <LinearLayout marginLeft="@triple{@data{cellType},20,50}" backgroundColor="#f2f2f2" height="match_content" width="match_parent" orientation="vertical" disableFlatten="true" accessibility="auto">
    <!-- auto makes the layout readable -->
    <TextView width="match_content" height="match_content" textColor="#ff051b28" textSize="12" marginTop="20" marginBottom="20" text="这是一个textView" />
    <TextView width="match_content" height="match_content" textColor="#ff051b28" textSize="12" marginTop="20" marginBottom="20" text="这是一个有焦点的textView" accessibility="on" onTap="@rTap{}" accessibilityText="这是一个有焦点的textView" />
    <FastTextView width="match_content" height="match_content" textColor="#ff051b28" textSize="12" marginTop="20" marginBottom="20" text="这是一个FastTextView" />
    <TextView width="match_content" height="match_content" textColor="#ff051b28" textSize="12" marginTop="20" marginBottom="20" accessibility="off" text="这是一个不需要被朗读的textView" />
    <ImageView width="100" height="100" marginLeft="20" marginTop="12" borderWidth="3ap" borderColor="#FF0000" accessibility="on" accessibilityText="这是一个ImageView点击" onTap="@rTap{'测试'}" imageUrl="https://img.alicdn.com/tfs/TB1FuMQQFXXXXXLXXXXXXXXXXXX-420-420.jpg" />
  </LinearLayout>
</LinearLayout>

Unified Behavior Across iOS and Android

Diagrams show how layout and child nodes interact under different accessibility attribute values, ensuring consistent focus and reading order on both platforms.

Accessibility Validation Gate

To guarantee that every template released on Taobao’s core pages supports accessibility, a validation gate checks templates for required attributes. Key rules include:

Non‑interactive controls with onTap must have accessibility="on" and a corresponding accessibilityText.

If a parent layout has accessibility="on", its child views with onTap cannot obtain focus.

Layouts with auto must also set accessibility="on" on child TextView elements that need to be read.

Accessibility attributes cannot use dynamic expressions.

The gate automatically flags violations and provides suggestions, ensuring that all released templates are accessible.

Vision

By embedding accessibility into the development workflow, we aim to make Taobao a warm, inclusive product for visually impaired users, reducing manual checks and fostering a culture where accessibility is a natural part of app development.