RN 无障碍功能

清香的orange
1,567 阅读10分钟

基本属性

  • accessible 无障碍元素

  • accessibilityLabel 无障碍标签

  • accessibilityHint 无障碍提示

属性说明类型默认值
accessible是否为无障碍元素booleanfalse
accessibilityLabel （无障碍标签）提示元素类型string文本元素内容
accessibilityHint（无障碍提示）元素解释文本提示string-

说明

  • 默认情况下，所有可点击的组件（Touchable 系列组件等）都是无障碍元素
  • 当 Text 父元素设置无障碍属性时，无法单独选中单个 Text 元素。
  • 当设置 accessibilityLabel 或 accessibilityHint 时，将不会读取直接子 Text 元素文本内容
  • Touchable 系列组件含有文本播报（accessibilityLabel 、 accessibilityHint、Text、字体 Icon ），若写有 onPress 方法会含有默认提示： 点按两次即可激活。

示例：

```tsx
// font Icon 带有默认提示
<TouchableOpacity
   onPress={() => {}}
   >
  <Icon svg={false} type='shopping-cart' size={24} color='#CC342C' />
</TouchableOpacity>

// svg Icon 不带有默认提示
<TouchableOpacity
   onPress={() => {}}
>
  <Icon svg={true} type='shopping-cart' size={24} color='#CC342C' />
</TouchableOpacity>
```

  • accessibilityLiveRegion 无障碍的动态区域 (Android)

    组件发生动态变化，辅助服务进行何种操作，具体见下方属性值描述

  • accessibilityRole 无障碍角色

    可访问性角色将 组件的用途 传达给辅助技术的用户。设置相应的角色，也会为相应组件添加默认的角色相关的提示信息，具体见下方属性值描述

  • accessibilityState 无障碍状态

    向辅助技术的用户描述组件的当前状态。accessibilityState 值为一个对象。

  • accessibilityValue 无障碍值

    表示组件的当前值。 它可以是组件值的文本描述，或者对于基于范围的组件，例如滑块和进度条，它包含范围信息（最小值、当前和最大值）。 accessibilityValue 值为一个对象。

  • accessibilityViewIsModal (ios)

    VoiceOver 是否应该忽略作为接收者兄弟视图中的元素

    // 视图 B 元素将会被 VoiceOver 忽略
<View>
  <View accessibilityViewIsModal={true}>
    <text>A</text>
  <View>
  <View>
    <text>B</text>
  <View>
</View>

  • 无障碍功能优先级

    • importantForAccessibility （Android）【string】
    • accessibilityElementsHidden （ios）【boolean】

说明

  1. 可以控制某个视图是否触发无障碍功能事件，是否将其报告给辅助服务（即：辅助服务是否忽略该元素）。
  2. Android 具体值可以设置为 auto，yes，no 和 no-hide-descendants（最后一个值会强制辅助服务忽略当前组件及其所有子组件)

  • onAccessibilityEscape 转义手势事件 (ios)

    转义 手势（即两指 Z 形手势）时触发函数，从当前页面开始向上遍历元素或页面直至找到绑定 onAccessibilityEscape 方法的元素位置

  • onAccessibilityTap 无障碍元素的点击事件

    用户 双击 某个已经选中的 无障碍元素 时调用

  • onMagicTap（ios） 双指双击事件

    用户 双指双击 某个已经选中的 无障碍元素 时调用

  • Accessibility Actions 无障碍操作

    组件需定义下面两个属性：（平台限制比较大）

    1. accessibilityActions 通过 accessibilityActions 属性定义它支持的操作列表
    2. onAccessibilityAction 实现一个 onAccessibilityAction 函数来处理动作请求
<View
  accessible={true}
  // 操作数组列表
  accessibilityActions={[ 
    { name: 'magicTap', label: 'magicTap' },
    { name: 'longpress', label: 'longpress' }
  ]}
  // 处理动作请求函数。
  onAccessibilityAction={(event) => { 
    switch (event.nativeEvent.actionName) {
      case 'magicTap':
        Alert.alert('Alert', 'magicTap action success');
        break;
      case 'longpress':
        Alert.alert('Alert', 'longpress action success');
        break;
    }
  }}
/>

属性值详细描述

accessibilityLiveRegion 无障碍的动态区域（Android）

  • none 辅助服务不应该提醒用户当前视图的变化。
  • polite 辅助服务应该提醒用户当前视图的变化。
  • assertive 辅助服务应该立即打断当前的语音会话，提醒用户当前视图的变化。

accessibilityRole 无障碍角色

  • adjustable 当元素可以“调整”（例如滑块）时使用。
  • alert 当元素包含要呈现给用户的重要文本时使用。
  • button 当元素应被视为按钮时使用。
  • checkbox 当一个元素代表一个可以被选中、取消选中或具有混合选中状态的复选框时使用。
  • combobox 当一个元素代表一个组合框时使用，它允许用户在多个选项中进行选择。
  • header 当元素充当内容部分的标题（例如导航栏的标题）时使用。
  • image 当元素应被视为图像时使用。例如，可以与按钮或链接结合使用。
  • imagebutton 当元素应该被视为按钮并且也是图像时使用。
  • keyboardkey 当元素用作键盘键时使用。
  • link 当元素应被视为链接时使用。
  • menu 当组件是一个选项菜单时使用。
  • menubar 当组件是多个菜单的容器时使用。
  • menuitem 用于表示菜单中的项目。
  • none 当元素没有角色时使用。
  • progressbar 用于表示指示任务进度的组件。
  • radio 用于表示单选按钮。
  • radiogroup 用于表示一组单选按钮。
  • scrollbar 用于表示滚动条。
  • search 当文本字段元素也应被视为搜索字段时使用。
  • spinbutton 用于表示打开选项列表的按钮。
  • summary 当一个元素可用于在应用程序首次启动时提供应用程序中当前条件的快速摘要时使用。
  • switch 用于表示可以打开和关闭的开关。
  • tab 用于表示一个选项卡。
  • tablist 用于表示选项卡列表。
  • text 当元素应被视为无法更改的静态文本时使用。
  • timer 用来表示一个定时器。
  • toolbar 用于表示工具栏（操作按钮或组件的容器）。

accessibilityState 无障碍状态

  • disabled 指示元素是否被禁用。
  • selected 指示当前是否选择了可选元素。
  • checked 指示可检查元素的状态。 此字段可以采用布尔值或 mixed 字符串来表示混合复选框。
  • busy 指示元素当前是否忙。
  • expanded 指示可展开元素当前是展开还是折叠

accessibilityValue 无障碍值

  • min 组件范围的最小值, now 设置后必须设置
  • max 组件范围的最大值, now 设置后必须设置
  • now 该组件范围的当前值
  • text 该组件值的文本描述

accessibilityActions（name）无障碍操作

  • magicTap (仅限 ios) 当 VoiceOver 焦点位于组件上或组件内部时，用户用两根手指双击。
  • escape (仅限 ios) 当 VoiceOver 焦点位于组件上或组件内部时，用户执行了一个两指擦洗手势（左、右、左）。
  • activate 激活组件。通常，这应该执行与用户在不使用辅助技术时触摸或单击组件时相同的操作。这是在屏幕阅读器用户双击组件时生成的。
  • increment 增加一个可调整的组件。
    • 在 ios 上，当组件具有“可调整”的角色并且用户将焦点放在它上面并向上滑动时，VoiceOver 会生成此操作。
    • 在 Android 上，当用户将辅助功能焦点放在组件上并按下音量调高按钮时，TalkBack 会生成此操作。
  • decrement 减少一个可调整的组件。
  • 在 ios 上，当组件具有可调整的角色并且用户将焦点放在它并向下滑动时，VoiceOver 会生成此操作。
  • 在 Android 上，当用户将辅助功能焦点放在组件上并按下音量调低按钮时，TalkBack 会生成此操作。
  • longpress (仅限 Android) 当用户将可访问性焦点放在组件上并双击并用一根手指按住屏幕时，会生成此操作。通常，这应该执行与用户在不使用辅助技术的情况下在组件上按住一根手指时相同的操作。 label 字段对于标准操作是可选的，并且通常不会被辅助技术使用。对于自定义操作，它是一个本地化的字符串，其中包含要呈现给用户的操作的描述。

AccessibilityInfo

AccessibilityInfo 可以用来查询读屏应用的当前状态，并且可以监听其状态变化

  • addEventListener()

添加事件监听函数，具体支持事件类型见下 监听事件类型

static addEventListener(eventName, handler)

  • setAccessibilityFocus()

将读屏软件的焦点设置到某个元素上， 该元素需要为 accessible 元素

static setAccessibilityFocus(reactTag)

示例：

const reactTag = findNodeHandle(elementRef.current);
// reactTag 为 number 类型，元素索引标识
if (reactTag) {
    AccessibilityInfo.setAccessibilityFocus(reactTag);
}

  • announceForAccessibility()

发送一个字符串给读屏应用朗读

static announceForAccessibility(announcement)

  • removeEventListener()

移除一个监听函数

static removeEventListener(eventName, handler)

  • isBoldTextEnabled()（ios）

查询当前是否启用粗体文本

static isBoldTextEnabled()

  • isGrayscaleEnabled()（ios）

查询当前是否启用灰度

static isGrayscaleEnabled()

  • isInvertColorsEnabled()（ios）

查询当前是否启用反转颜色

static isInvertColorsEnabled()

  • isReduceMotionEnabled()

查询当前是否启用了减少运动

static isReduceMotionEnabled()

  • isReduceTransparencyEnabled()（ios）

查询当前是否启用降低透明度

static isReduceTransparencyEnabled()

  • isScreenReaderEnabled()

查询读屏应用当前是否开启，返回值为一个 promise，最终解析值为一个布尔值

static isScreenReaderEnabled()

监听事件类型

  • boldTextChanged (仅限 ios) 当粗体文本切换的状态改变时触发。事件处理程序的参数是一个布尔值。启用粗体文本时布尔值为真，否则为假。
  • grayscaleChanged (仅限 ios) 当灰度切换的状态改变时触发。事件处理程序的参数是一个布尔值。启用灰度时布尔值为真，否则为假。
  • invertColorsChanged (仅限 ios) 当反转颜色切换的状态改变时触发。事件处理程序的参数是一个布尔值。启用反转颜色时布尔值为真，否则为假。
  • reduceMotionChanged 当减少运动切换的状态改变时触发。事件处理程序的参数是一个布尔值。当启用减少运动时（或当 开发人员选项 中的 过渡动画比例 为 动画关闭）时，布尔值为真，否则为假。
  • screenReaderChanged 屏幕应用状态改变时触发读。动态给监听函数的参数为布尔值，真开启状态，假反之。
  • **reduceTransparencyChanged ** (仅限 ios) 当降低透明度切换的状态改变时触发。事件处理程序的参数是一个布尔值。启用降低透明度时布尔值为真，否则为假。
  • announcementFinished (仅限 ios) 在读屏软件一次完成朗读后触发。传递给监听函数的参数为一个字典，包含以下两个字段：
  • announcement 读屏软件所读的字符串。
  • success 此次朗读是否成功完成。

监听读屏应用的状态变化

import React, { useState } from 'react';
import { AccessibilityInfo } from 'react-native';

const [accessibilityEnabled, setAccessibilityEnabled] = useState(false); // 读屏设备是否开启，默认 false

useEffect(() => {
  AccessibilityInfo.fetch().done((enabled) => {
    setAccessibilityEnabled(enabled);
  });
}, [])

useEffect(() => {
  // 监听读屏应用状态该边
	AccessibilityInfo.addEventListener('change', handleAccessibilityChange);
  
  return () => {
    // 组件销毁前，remove 监听事件
		AccessibilityInfo.removeEventListener('change', handleAccessibilityChange);
  }
})

// 监听事件
const handleAccessibilityChange = (enabled) => {
	setAccessibilityEnabled(enabled);
}

Android

上下滑动可切换操作类型

类型accessibilityRoledescription
默认-在 accessible 元素之间切换
控件checkbox、radio、search、switch ...只在控件之间切换
链接link只在链接之间切换
标题header只在标题之间切换
段落-在 accessible 元素之间切换
字词-在 accessible 字词文本内元素之间切换
字符-在 accessible 单个字符之间切换

如何开启无障碍辅助服务

Android（TalkBack）

  1. 请打开设置，在最上方的搜索栏输入无障碍，在无障碍页面打开 无障碍快捷方式、屏幕锁定时可用 开关。
  2. 在锁屏界面或桌面，同时按 音量上键 + 音量下键 超过 3 秒，则自动打开无障碍模式（相同操作亦可关闭）。

IOS （VoiceOver）

  1. 请打开 iOS 设备的设置选项。点击 通用，然后进入 辅助选项，打开旁白。

  2. 在 视觉 菜单下点击 VoiceOver，将开关置为打开状态即可启用。

  3. 在辅助选项的最底部，有一个 辅助选项快捷键，开启之后可以通过点击三次 Home 按钮来快速关闭或打开 VoiceOver 工具。

参考资料：
官方文档
中文官方文档

avatar
文章
阅读
粉丝