无障碍适配在京东到家RN中的实践总结

3. 解决操作反馈问题

当用户点击某个按钮操作之后，需要给用户反馈语音结果。

这里推荐大家使用react-native-tts库。

示例代码：

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

4. 解决UI元素交互问题

当元素聚焦时，我们使用无障碍API改变元素焦点。

示例代码：

const reactTag = findNodeHandle(myElement.current);if (reactTag) { AccessibilityInfo.setAccessibilityFocus(reactTag);}

注：被选中的元素，如果需要自动被无障碍朗读，需要增加accessible={true}属性。

针对各类型问题给出了明确的解决方案及示例。除了这些场景问题外，还有一个很重要的api在适配无障碍时，经常使用到：判断当前手机系统是否已开启无障碍服务。

开启代码如下：

import { AccessibilityInfo } from 'react-native';......AccessibilityInfo.fetch().done((enabled) => { this.setState({ AccessibilityEnabled: enabled });});AccessibilityInfo.addEventListener('change',this.handleAccessibilityChange);......handleAccessibilityChange = (isEnabled) => { this.setState({ AccessibilityEnabled: isEnabled });}// 记得在组件销毁前，remove事件AccessibilityInfo.removeEventListener( 'change', this.handleAccessibilityChange);

4 适配问题&规范的制定

通过无障碍适配在京东到家RN中的实践，我们发现：

问题一：在适配过程中，团队在适配无障碍时，总会不知从何入手进行适配的开发工作。为此，制定了一套无障碍适配规范，以及开发流程图。

• 我们规定以下6种类型元素需要进行无障碍适配，并给出适配细则：

① 基础元素适配

包含按钮、文本、图片、标签。需要给出明确的语义描述内容，使用accessibilityLabel属性进行适配。

按钮需要增加明确的标识属性accessibilityRole="button"，并需要给出点击后的动作提示，使用属性accessibilityHint进行适配。

② 组合元素适配

当多个元素可被用户整体选中，进行统一动作的元素被视为组合元素。例如：入口球。此类元素需要在最外层容器View上增加属性accessible={true}，标识多个元素作为整体被选中。

③ 弹层元素适配

弹层包含Alert和Popup两种。此类型元素弹出时，将覆盖下层页面。为了让无障碍知晓弹层弹出时，忽略对下层页面元素的识别。需要同时增加两个属性importantForAccessibility和accessibilityElementsHidden，分别对应Android和iOS两个平台的适配开发。

④ 页面级适配

当打开多级页面时，为避免无障碍识别到下层被遮盖的页面元素，需要忽略对下层页面的识别。需要同时增加两个属性importantForAccessibility和accessibilityElementsHidden，分别对应Android和iOS两个平台的适配开发。

⑤ 元素状态适配

当元素有禁用和可用两种状态时，需要告知无障碍当前元素状态情况，需使用属性accessibilityStates进行适配。

⑥ 交互元素

分为两类：一、自动切换类的Banner；二、元素操作有提示行为。

针对一，Banner聚焦被选中时，需要在Banner切换Slide后，自动改变焦点，保证无障碍及时识别当前显示的Slide。使用Api：AccessibilityInfo.setAccessibilityFocus。

针对二，当元素经过用户触发某种行为后，给予用户反馈，需要使用Api，Tts.speak及时对用户进行语音反馈。相关京东React文档地址：https://njst.360buyimg.com/jdreact/introduction/apis/JDReactTextToSpeech.html

上述规范中使用到的属性用法请见文档：https://reactnative.cn/docs/next/accessibility

• 开发流程图：

问题二：现有的开发流程中未有涉及到无障碍适配的环节。但是在版本迭代过程中，很多适配的无障碍功能会被修改到，移除，新增需求等操作，都需要重新对无障碍进行适配。

因此我们在代码Review阶段，增加对无障碍适配规范的审查环节。这样不仅可以增加大家对无障碍适配的认知，也可以避免需求迭代对无障碍适配功能带来的不必要的影响。

针对这个问题，接下来我们也会继续探索自动化方案，在代码编译阶段，通过规则检查类型元素是否已经按照规范进行适配，并对相应的开发人员给出适配规范提示。从而减小人工审核的成本。

5 总结

无障碍适配在京东到家RN中的实践，表明ReactNative项目进行无障碍适配是可行的。在实践过程中，我们为团队制定了适配规范，并将规范执行落地，降低适配开发的门槛。同时，为解决需求迭代对无障碍适配的影响，我们将适配审核放到Review阶段，保证适配功能跟随需求持续迭代，将影响降到最低。未来，我们将继续探索自动化审核方案，持续为降低人力成本做出努力。

本次适配工作，我们已经完成对目标规划的流程适配工作。保证了障碍用户无忧购买商品。

无障碍适配的实践也让我们体会到，科技属于每一个人。这里要感谢各大手机厂商在默默的从底层支撑着信息无障碍的的发展，让科技进步带来的便利实际帮助到各个群体。

作者简介：章文顺，RN无障碍适配工作负责人，到家前端团队高级前端工程师。