Accessibility

本机应用辅助功能（iOS和Android）

iOS和Android都提供API以使残疾人可以访问应用程序。此外，这两种平台都提供捆绑式辅助技术，例如面向视障人士的屏幕阅读器VoiceOver（iOS）和TalkBack（Android）。同样，在React Native中，我们已经包含旨在为开发人员提供更易访问的应用程序的API。请注意，iOS和Android的方法略有不同，因此React Native实现可能因平台而异。

除此文档外，您可能会发现关于React Native辅助功能的此博客文章很有用。

使应用程序可访问

辅助功能属性

可访问（iOS，Android）

何时true，表示该视图是无障碍元素。当视图是可访问性元素时，它将其子项分组为一个可选组件。默认情况下，所有可触摸元素均可访问。

在Android上，反应原生视图的'accessible = {true}'属性将被翻译为原生'focusable = {true}'。

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

在上面的例子中，我们无法分别在'text one'和'text two'上分别获得可访问性。相反，我们将重点放在具有“可访问”属性的父视图上。

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>

在上面的例子中，accessibilityLabelTouchableOpacity元素将默认为“按下我！”。标签是通过连接所有由空格分隔的Text节点构造的。

accessibilityTraits (iOS)

辅助功能特征告诉使用VoiceOver的人选择了哪种元素。这个元素是一个标签吗？一个按钮？标题？这些问题由答复accessibilityTraits。

要使用，请将该accessibilityTraits属性设置为其中一个（或一组）可访问性特征字符串：

none当元素没有特征时使用。

按钮在元素应被视为按钮时使用。

链接当元素应被视为链接时使用。

header当一个元素作为内容部分的标题（例如导航栏的标题）时使用。

搜索当文本字段元素也应被视为搜索字段时使用。

image当元素应该被视为图像时使用。例如，可以结合按钮或链接。

selected当元素被选中时使用。例如，表格中的选定行或分段控件中的选定按钮。

播放当元素在激活时播放自己的声音时使用。

键当元素充当键盘键时使用。

文本用于将元素视为无法更改的静态文本。

摘要当应用程序首次启动时，可以使用元素提供应用程序中当前条件的快速摘要。例如，当“天气”首次启动时，具有今天天气条件的元素将标记为此特征。

禁用当控件未启用且不响应用户输入时使用。

频繁更新频繁更新其标签或值时使用，但经常发送通知。允许辅助功能客户端轮询更改。秒表将是一个例子。

startsMedia用于激活元素时启动媒体会话（例如播放电影，录制音频），这些内容不应当被辅助技术（如VoiceOver）的输出中断。

可调整用于可以“调整”元素（例如滑块）。

allowedDirectInteraction当元素允许VoiceOver用户（例如，表示钢琴键盘的视图）的直接触摸交互时使用。

pageTurn通知VoiceOver，当它读完元素的内容时，它应该滚动到下一页。

accessibilityViewIsModal (iOS)

一个布尔值，指示VoiceOver是否应忽略接收器的同级视图内的元素。

例如，在包含同级视图的窗口A和B，设置accessibilityViewIsModal到true上视图B使得VoiceOver并忽略在视图中的元素A。另一方面，如果视图B包含子视图C并且设置accessibilityViewIsModal为true视图C，则VoiceOver不会忽略视图中的元素A。

onAccessibilityTap (iOS)

使用此属性可指定一个自定义函数，当某人在选中时通过双击来激活可访问元素时，该函数将被调用。

onMagicTap (iOS)

将此属性分配给一个自定义函数，当某人执行“魔力轻拍”手势时这将被调用，这是双指双击。一个神奇的水龙头功能应该执行用户可以对组件执行的最相关的操作。在iPhone上的电话应用程序中，一个神奇的点击接听电话，或结束当前的电话。如果所选元素没有onMagicTap函数，系统将遍历视图层次结构，直到找到一个有效的视图。

accessibilityComponentType (Android)

在某些情况下，我们也希望提醒最终用户所选组件的类型（即它是一个“按钮”）。如果我们使用本地按钮，这将自动工作。由于我们使用JavaScript，因此我们需要为TalkBack提供更多的上下文。为此，您必须为任何UI组件指定“accessibilityComponentType”属性。例如，我们支持'按钮'，'radiobutton_checked'和'radiobutton_unchecked'等等。

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

在上面的示例中，TalkBack将通过本地按钮来宣告TouchableWithoutFeedback。

accessibilityLiveRegion (Android)

当组件动态更改时，我们希望TalkBack提醒最终用户。这是通过'accessibilityLiveRegion'属性实现的。它可以设置为'无'，'礼貌'和'自信'：

无可访问性服务不应该公布对此视图的更改。

礼貌辅助功能服务应宣布对此视图的更改。

断言无障碍服务应该中断正在进行的讲话，以立即通告对该观点的改变。

<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组件具有相同的父级，则默认的辅助功能焦点可能具有不可预知的行为。'importantForAccessibility'属性将通过控制视图是否触发辅助功能事件并将其报告给辅助功能服务来解决此问题。它可以设置为'auto'，'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-descendants”>
    <Text> Second layout </Text>
  </View>
</View>

在上例中，黄色布局及其后代对TalkBack和所有其他辅助功能服务完全不可见。因此，我们可以轻松使用同一家长的重叠视图，而不会混淆TalkBack。

检查是否启用屏幕阅读器

该AccessibilityInfoAPI允许您确定屏幕阅读器是否处于激活状态。有关详细信息，请参阅AccessibilityInfo文档。

发送辅助功能事件（Android）

有时在UI组件上触发可访问性事件（例如，在屏幕上显示自定义视图或选择了自定义单选按钮时）非常有用。本机UIManager模块为此公开了一个方法'sendAccessibilityEvent'。它有两个参数：视图标签和事件类型。

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

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

在上面的例子中，我们创建了一个自定义的单选按钮，现在就像本地一样。更具体地说，话语提示现在正确地宣布对单选按钮选择的更改。

测试VoiceOver支持（iOS）

要启用VoiceOver，请转到iOS设备上的“设置”应用。点按常规，然后点按辅助功能。在那里您会发现许多人们用来使设备更实用的工具，如大胆的文字，增强的对比度和VoiceOver。

要启用VoiceOver，请点击“视觉”下的VoiceOver并切换显示在顶部的开关。

在辅助功能设置的最底部，有一个“辅助功能快捷方式”。您可以通过三次单击主页按钮来使用它来切换VoiceOver。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18