什么时候我们应该在React Native中使用`accessibilityRole`？

Question

这样做对吗？我担心它会把 "switch "这个词读给用户听两次。

<Switch
      accessible={true}
      accessibilityLabel="Switch button"
      accessibilityHint="Double tap to toggle setting"
      accessibilityRole="switch"   
/>

非常感谢。

Answer 1

在这里说两句关于可访问性的注意事项。

• 从0.60开始，所有的交互式React Native组件默认都是可访问的。
• 当使用 accessible 参数，它将把任何子元素捆绑成一个可访问的组件。它将把任何子元素捆绑到一个可访问的组件中，当为真时，屏幕阅读器将不允许用户选择单个组件。
• 尤其是标签，记得要使用完整的标点符号，否则你可能会创造出意想不到的、让人不知所措的跑题句子。
• 对于用户体验来说，你的标签应该简明扼要地读出开关的目的。在没有上下文的情况下阅读它，我不知道这个切换实际上会是什么意思 做.

回答你的问题。

你是对的，这个设置会读出两次 "开关按钮"，然后是提示。

我测试了 <Switch> 组件在iPad上使用VoiceOver。默认情况下，它是可以访问的，读取的角色是 "按钮"。给它一个参数 accessibilityRole='switch' 读作 "开关按钮 "的角色，并自动加入 "双击切换设置 "的提示。

下面的组件会给用户读成："飞机模式。开关按钮 ... 双击可切换设置。"

<Switch
      accessibilityLabel="Airplane mode."
      accessibilityRole="switch"   
/>

Answer 2

accessibilityRole 向辅助技术的用户传达一个组件的目的。

更多信息，请在官方文档中找到以下内容。

https:/reactnative.devdocsaccessibility#accessibilityrole-android-ios。