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無障礙適配工作負責人，到家前端團隊高級前端工程師。