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

Question

这是正确的吗？恐怕它会向用户读两次 'switch' 这个词。

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

非常感谢。

Answer 1

accessibilityRole 将组件的用途传达给辅助技术的用户。

更多信息请查看官方文档

https://reactnative.dev/docs/accessibility#accessibilityrole-android-ios

Answer 2

这里有一些关于辅助功能的说明：

从 0.60 开始，默认情况下可以访问所有交互式 React Native 组件。 (accessible=true)
使用 accessible 参数时要小心。它将所有子元素捆绑到一个可访问的组件中，并且屏幕 reader 将不允许用户 select 单个组件。（因此您可能需要覆盖默认行为。）
特别是标签，请记住使用完整的标点符号，否则您可能会创建意想不到的和压倒性的运行-on 句子。
对于 UX，您的标签应该以简洁的方式阅读开关的用途。在没有上下文的情况下阅读它，我不知道这个切换实际上会做什么 do.

回答你的问题：

你是正确的，这个设置会读出“切换按钮”两次，然后是提示。

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

以下组件将向用户读取为“飞行模式。切换按钮 ...双击切换设置。”

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

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

When should we use `accessibilityRole` in React Native?

accessibility

voiceover

talkback

react-native