輔助功能

無障礙 (iOS, Android)

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

accessibilityLabel (iOS, Android)

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

accessibilityTraits (iOS)

• none 沒有特徵時使用。
• button 當元素應被視為按鈕時使用。
• link 當元素應被視為鏈接時使用。
• header 當元素充當內容部分的標題（例如導航欄的標題）時使用。
• search 當文本字段元素也應被視為搜索字段時使用。
• image 應將元素視為圖像時使用。例如，可以與按鈕或鏈接組合使用。
• selected 選擇元素時選擇使用。例如，表中的選定行或分段控件中的選定按鈕。
• plays 在元素激活時播放自己的聲音時使用。
• key 當元素充當鍵盤鍵時使用。
• text 應將元素視為無法更改的靜態文本時使用。
• summary 在應用程序首次啟動時，可以使用元素快速匯總應用程序中當前條件的摘要。例如，當Weather首次啟動時，具有今天天氣狀況的元素將標記為此特徵。
• disabled 在未啟用控件且未響應用戶輸入時使用。
• frequentUpdates 在元素頻繁更新其標籤或值時使用，但經常發送通知。允許輔助功能客戶端輪詢更改。秒錶就是一個例子。
• startsMedia 在激活元素時使用啟動媒體會話（例如播放電影，錄製音頻），該會話不應被輔助技術（如VoiceOver）的輸出中斷。
• adjustable 在可以“調整”元素時使用（例如滑塊）。
• allowsDirectInteraction 當元素允許VoiceOver用戶直接觸摸交互時使用（例如，表示鋼琴鍵盤的視圖）。
• pageTurn 通知 VoiceOver 在完成元素內容讀取後應滾動到下一頁。

accessibilityViewIsModal (iOS)

accessibilityElementsHidden (iOS)

onAccessibilityTap (iOS)

onMagicTap (iOS)

accessibilityComponentType (Android)

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

accessibilityLiveRegion (Android)

• 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>

importantForAccessibility (Android)

<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-descendants”>
    <Text> Second layout </Text>
  </View>
</View>

檢查是否已啟用屏幕閱讀器

發送輔助功能事件 (Android)

import { UIManager, findNodeHandle } from 'react-native';

_onPress: function() {
  const radioButton = this.state.radioButton === 'radiobutton_checked' ?
    'radiobutton_unchecked' : 'radiobutton_checked'

  this.setState({
    radioButton: radioButton
  });

  if (radioButton === 'radiobutton_checked') {
    UIManager.sendAccessibilityEvent(
      findNodeHandle(this),
      UIManager.AccessibilityEventTypes.typeViewClicked);
  }
}

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

測試VoiceOver支持（iOS）