對 Android 系統(tǒng)而言，輔助功能涉及到了許多不同的話題，其中之一是讓喪失視力的人能夠使用您的應用程序。對于現(xiàn)在的社會，谷歌提供了一個名叫 TalkBack 的內置屏幕讀者服務機器人。使用該機器人，你可以使用觸摸勘探和手勢來使用移動設備和應用程序。TalkBack 可以使用文本語音轉換器來閱讀屏幕上的內容并且可以發(fā)出警報來通知用戶有關于應用程序中的重要信息。點擊這里來了解更多關于 Android 的輔助功能的特征以及點擊這里來了解更多關于使您的本地應用程序的輔助功能。

創(chuàng)建輔助性應用程序

輔助功能的性質

輔助性（iOS, Android）

如果為 true的情況，代表該視圖是一個輔助功能元素。當視圖是輔助功能元素時，它把它的子元素分組成一個單一的可選組件。默認情況下，可觸摸的所有元素都具有輔助性。

在 Android 系統(tǒng)中，在 react-native 視圖中 ' accessible={true}' 屬性將被翻譯成本地命令 ' focusable={true}'。

<View accessible={true}>
  <Text>text one</Text>
  <Text >text two</Text>
</View>

在上面的示例中，我們不能分別在 'text one' 和 'text two' 中獲得輔助焦點。相反我們可以在父元素上使用 'accessible' 屬性獲得焦點。

accessibilityLabel (iOS, Android)

如果要將視圖標記為具有輔助性，那么一個比較好的做法就是為這個視圖設置一個 accessibilityLabel 標簽以便使用 VoiceOver 的人知道他們選擇了什么元素。當用戶選擇了一些元素，那么 VoiceOver 將會閱讀響應的字符串文本。

若要使用它，在您的視圖中將 accessibilityLabel 屬性設置為一個自定義的字符串：

<TouchableOpacity accessible={true} accessibilityLabel={'Tap me!'} onPress={this._onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableOpacity>

在上面的示例中，TouchableOpacity 元素中的 accessibilityLabel 會被默認的設置為 "點擊我！"。該標簽是通過使用空格符來串聯(lián)所有文本節(jié)點子元素構造的。

accessibilityTraits (iOS)

輔助功能特征告訴人們他們在使用 VoiceOver 的時候選擇了什么元素。此元素是一個標簽？一個按鈕？還是標頭？ accessibilityTraits 將會回答這些問題。

如果要使用它，請把 accessibilityTraits 屬性設置為 accessibilityTraits 輔助功能字符串(或數(shù)組)之一：

none 當元素沒有特征的時候使用。
button 當元素需要被當做一個按鈕的時候使用。
link 當元素需要被當做鏈接的時候使用。
header 當元素作為內容部分的標題 (如導航欄中的標題) 的時候使用。
search 當文本字段元素也被視為一個搜索字段的時候使用。
image 當元素需要被作為圖像，比如和按鈕和鏈接結合的時候使用。
selected 當該元素被選中時使用。例如，表中被選中的行或者分段控件中選中的按鈕。
plays 當元素被激活的并且播放自己的聲音的時候使用。
key 當元素充當鍵盤按鍵的時候使用。
text 當元素應該被視為不能更改的靜態(tài)文本的時候使用。
summary 當在應用程序首次啟動的時候，該元素可以提供應用程序的實時狀況的摘要的時候使用。例如，當關于天氣的應用程序首次啟動的時候，帶有當天天氣信息的元素將被該特征所標記。
disabled 當控件未啟動并且對用戶的輸入無響應的時候使用。
frequentUpdates 當元素經(jīng)常更新其標簽或者它的值，但是太平凡的發(fā)送通知的時候使用。允許輔助功能客戶端輪詢更改。秒表就是一個例子。
startsMedia 當激活一個元素并開始一段媒體會話(例如播放電影，錄制音頻)不應該被輔助技術的輸出所打斷，比如 VoiceOver。
adjustable 當元素可以被"調整"的時候使用(例如滑塊)。
allowsDirectInteraction 當元素允許 VoiceOver 用戶直接進行觸摸互動的時候使用(例如，表示一個鋼琴鍵盤的視圖)。
pageTurn 當它完成閱讀的元素的內容時候通知 VoiceOver 需要滾動到下一個頁面。

onAccessibilityTap (iOS)

使用此屬性來分配一個自定義的函數(shù)，當有人在一個可訪問元素被選中的時候通過雙擊來激活它的時候來調用該函數(shù)。

onMagicTap (iOS)

當有人使用 “magic tap”手勢，即：用兩個手指雙擊的時候，該屬性就會被分配給一個自定義函數(shù)，同時，這個函數(shù)會被調用。一個魔法敲擊函數(shù)應該執(zhí)行用戶可以在組件中找到的最具有相關性的操作。在 iPhone 的手機應用程序中，一個魔法敲擊可以接聽或者結束一個電話。如果所選的元素不具有 onMagicTap 功能，該系統(tǒng)將遍歷視圖層次結構直到它找到一個擁有此功能的視圖。

accessibilityComponentType (Android)

在某些情況下，我們也要提醒選定的組件類型的最終用戶 (即，它是一個"按鈕")。如果我們正在使用本機的按鈕，那么它會自動工作。由于我們使用的是 javascript，所以我們需要為 TalkBack 提供更多的語境。為了達到這個目的，您必須為所有 UI 組件指定 'accessibilityComponentType' 屬性。例如，我們支持 'button'，'radiobutton_checked' 和 'radiobutton_unchecked'等。

<TouchableWithoutFeedback accessibilityComponentType=”button”
  onPress={this._onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableWithoutFeedback>

在上面的示例中，TouchableWithoutFeedback 是被 TalkBack 作為一個本機按鈕聲明的。

accessibilityLiveRegion (Android)

當組件動態(tài)的更改時，我們希望 TalkBack 去提醒最終用戶。'AccessibilityLiveRegion' 屬性讓這成為可能。它可以被設置為 ‘none’, ‘polite’ 以及 ‘a(chǎn)ssertive’。

none 輔助功能服務不應該對此視圖通知改變的地方。
polite 輔助功能服務應該對此視圖通知改變的地方。
assertive 輔助功能服務應該中斷正在進行的會話，并且以立即宣布該視圖的改變。

<TouchableWithoutFeedback onPress={this._addOne}>
  <View style={styles.embedded}>
    <Text>Click me</Text>
  </View>
</TouchableWithoutFeedback>
<Text accessibilityLiveRegion="polite">
  Clicked {this.state.count} times
</Text>

在上面的示例方法 _addOne 更改了 state.count 變量。當最終用戶單擊 TouchableWithoutFeedback 的時候，因為 TalkBack 的 'accessibilityLiveRegion=”polite”' 屬性，所以它讀取了文本視圖中的文本。

importantForAccessibility (Android)

對于兩個重疊的并且擁有相同父元素的 UI 組件，默認的輔助功能焦點可以有不可預知的行為。如果一個視圖觸發(fā)輔助事件并且它被匯報給了輔助功能服務器，那么 'ImportantForAccessibility' 屬性將會通過控制解決它，它可以被設置為‘a(chǎn)uto’, ‘yes’, ‘no’ 以及 ‘no-hide-descendants’ (最后一個值將迫使輔助功能服務忽略該組件和它的所有子元素)。

<View style={styles.container}>
  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    backgroundColor: 'green'}} importantForAccessibility=”yes”>
    <Text> First layout </Text>
  </View>
  <View style={{position: 'absolute', left: 10, top: 10, right: 10, height: 100,
    backgroundColor: 'yellow'}} importantForAccessibility=”no-hide-descendant”>
    <Text> Second layout </Text>
  </View>
</View>

在上面的示例中，對于 TalkBack 以及其他的輔助功能服務而言，黃色的布局及其后代是完全不可見的。所以我們可以容易的使用來自于同一個父元素并且不帶有令人疑惑的 TalkBack 的視圖。

發(fā)送輔助功能事件（Android）

有時候在 UI 組件中去觸發(fā)一個輔助功能事件很有用 (即當一個自定義的視圖在屏幕上顯示或自定義單選按鈕已被選中)。為了達到這個目的，本地 UIManager 模塊公布了一個名叫 'sendAccessibilityEvent' 的方法。它擁有兩個參數(shù)：視圖標簽和一個類型的事件。

_onPress: function() {
  this.state.radioButton = this.state.radioButton === “radiobutton_checked” ?
  “radiobutton_unchecked” : “radiobutton_checked”;
  if (this.state.radioButton === “radiobutton_checked”) {
    RCTUIManager.sendAccessibilityEvent(
      React.findNodeHandle(this),
      RCTUIManager.AccessibilityEventTypes.typeViewClicked);
  }
}

<CustomRadioButton
  accessibleComponentType={this.state.radioButton}
  onPress={this._onPress}/>

在上面的例子中，我們創(chuàng)建了一個如同本按鈕的自定義單選按鈕。更具體地說，TalkBack 可以正確的公布單選按鈕選擇的變化。

測試 VoiceOver 支持的內容（iOS）

如果要啟用 VoiceOver，那么請在你的 iOS 設備上打開設置應用程序的位置。點擊 General，然后點擊 Accessibility。那里你會發(fā)現(xiàn)許多人們用來優(yōu)化他們的設備的工具，比如粗體文本、增加的對比度以及 VoiceOver。

如果要啟用 VoiceOver，點擊 "Vision" 下的 VoiceOver，打開顯示在頂部的開關。

在輔助功能設置的最底部，還有一個"輔助功能的快捷方式"。你可以使用它三次單擊主頁按鈕來觸發(fā) VoiceOver。

上一篇：在設備上運行下一篇：ToolbarAndroid