Accessibility Adaptation for JD Daojia React Native Application

The article begins by explaining the concept of accessibility (also known as "无障碍设施") and its importance for users with visual, motor, or other disabilities, citing WHO statistics that over 1 billion people worldwide have some form of disability.

It then describes the specific challenge faced by JD Daojia’s RN application: visually impaired users could not easily navigate the app, leading to high usage barriers. An example scenario illustrates a user unable to locate the supermarket entry without visual cues.

To address this, the team started a comprehensive accessibility adaptation project in early 2020, first researching iOS solutions and then mapping those findings to RN limitations. Four main problems were identified:

Layer penetration issues where overlay elements interfere with screen‑reader focus.

Component readability and incorrect reading order, especially for image buttons and text.

Operation feedback lacking auditory cues.

UI element interaction problems such as focus handling for banners and pop‑ups.

For each problem, concrete implementation strategies and code snippets are provided.

1. Solving layer penetration: Use Android’s importantForAccessibility="no-hide-descendants" and iOS’s accessibilityElementsHidden={true} to hide underlying elements.

2. Improving component readability and order: Apply accessible={true} , accessibilityLabel , and accessibilityHint to components, e.g.:

<TouchableOpacity accessible={true} accessibilityLabel="门店名称" accessibilityHint="点击前往该门店" onPress={this._onPress}>
  <View>
    <Text>门店名称</Text>
  </View>
</TouchableOpacity>

3. Providing operation feedback: Integrate the react-native-tts library to speak messages after actions, e.g.:

Tts.getInitStatus().then(() => {
  Tts.speak('Hello, 京东到家!');
});

4. Managing UI element focus: Use AccessibilityInfo.setAccessibilityFocus(reactTag) after banner slides change, ensuring the screen reader follows the current element.

Additional guidelines cover six element types that require accessibility attributes (basic elements, composite elements, modal layers, page‑level screens, element states, and interactive elements) and the corresponding RN properties to set.

The team also introduced a review process to check accessibility compliance during code reviews and plans to automate checks in the build pipeline.

In conclusion, the accessibility adaptation proved feasible for a large React Native project, establishing standards, reducing development barriers, and ensuring continuous compliance as the product evolves.

At the end, a recruitment notice invites engineers to join the Dada R&D team.