无障碍功能 · React Native 中文网

您所在的位置:网站首页 AccessibilityTool 无障碍功能 · React Native 中文网

无障碍功能 · React Native 中文网

2024-06-06 06:06| 来源: 网络整理| 查看: 265

无障碍功能

译注:accessibility 一词常见多种译法:可访问性、无障碍性、辅助功能等等,其中文意思都不太能准确表达其功能的本质——即为残障人士提供便利。本文主要采用“无障碍功能”和“辅助技术/服务”的说法。如果你或你的公司暂时没有资源和精力去服务这些用户,那么你可以跳过本文。但是,译者个人希望借本文档,呼吁有能力有资源的商业公司/组织/个人,重视残障人士使用智能手机的权利。

iOS 和 Android 都提供了便于残障人士无障碍使用 App 的 API。此外,两个平台都提供了整套的辅助技术,比如都有针对视力受损人士的读屏软件(iOS 的 VoiceOver 和 Android 的 TalkBack)。同样地,在 React Native 中我们也封装了对应的 API,使开发者能够在 App 中集成无障碍功能。

注意:iOS 与 Android 在具体方法上会有所区别,因此 React Native 的实现也会因平台而异。

无障碍功能属性​ accessible​

设置为true时表示当前视图是一个“无障碍元素”(accessibility element)。无障碍元素会将其所有子组件视为一整个可以选中的组件。默认情况下,所有可点击的组件(Touchable 系列组件)都是无障碍元素。

在 Android 上,React Native 视图的accessible={true}属性会被转译为原生视图对应的focusable={true}属性。

text one text two

在上面这个例子中,当父视图开启无障碍属性后,我们就无法单独选中'text one'和'text two',而只能选中整个父视图。

accessibilityLabel​

当一个视图启用无障碍属性后,最好再加上一个 accessibilityLabel(无障碍标签),这样可以让使用 VoiceOver 的人们清楚地知道自己选中了什么。VoiceOver 会读出选中元素的无障碍标签。

设定accessibilityLabel属性并赋予一个字符串内容即可在 View、Text 或是 Touchable 中启用无障碍标签:

Press me!

在上面这段示例代码中,如果不在 TouchableOpacity 上设置无障碍标签,那么其默认值就会是"Press me!"(即 Text 子组件的文本值)。此时无障碍标签是通过自动取所有 Text 子节点的值,然后用空格连起来生成。

accessibilityLabelledBy Android​

引用另一个元素nativeID来构建复杂的表单。 accessibilityLabelledBy的值应该与相关元素的nativeID匹配:

用于输入字段标签的编辑框

在上面的例子中,当焦点位于 TextInput 上时,屏幕阅读器会提示输入,用于输入字段标签的编辑框。

accessibilityHint​

无障碍提示用于帮助用户理解操作可能导致什么后果,尤其是当这些后果并不能从无障碍标签中清楚地了解时。

要启用无障碍提示只需在需要设置的元素上设置accessibilityHint属性,并赋予用于解释的文本:

返回

在上面这个例子里,iOS 的 VoiceOver 会在标签后读取提示,如果用户在设备的VoiceOver设置中启用了提示。有关accessibilityHint指南的更多信息,请阅读iOS开发者文档。

在上面这个例子里,Android 的 Talkback将在标签后读取提示。目前,Android 上无法关闭提示。

accessibilityLanguage iOS​

通过使用 accessibilityLanguage 属性,屏幕阅读器将了解在阅读元素的 标签、值 和 提示 时要使用哪种语言。提供的字符串值必须遵循 BCP 47 规范。

🍕 accessibilityIgnoresInvertColors iOS​

反转屏幕颜色是一项辅助功能,它使得 iPhone 和 iPad 对于某些对亮度敏感的人更加舒适,对于某些色盲患者更容易区分,对于视力低下的人来说更容易识别。然而,有时您会查看照片等视图,并不希望其被反转。在这种情况下,您可以将此属性设置为 false,以便这些特定视图不会反转其颜色。

accessibilityLiveRegion Android


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3