有什么方法可以“隐藏”屏幕阅读器的视图，就像 HTML 中的“aria-hidden”一样？

Question

我需要像 VoiceOver 这样的屏幕阅读器不识别（或不“阅读”） this <View>。

例如，让我们假设我们有一个简单的应用程序使用此模板代码：<View><Text>Events</Text></View>。

当我运行这个应用程序时，我可以在屏幕上看到“事件”。然后，如果我启用 VoiceOver，他会说：“事件”。好吧，我希望他不能说“事件”。换句话说，我希望他无法阅读此事件。就像 HTML 中的“aria-hidden”一样。

是否可以？

Answer 1

您可以在 React Native 的屏幕阅读器中隐藏视图及其后代。其属性取决于平台。

accessibilityElementsHidden (iOS)

一个布尔值，指示此辅助功能元素中包含的辅助功能元素是否隐藏。例如，在包含兄弟视图 A 和 B 的窗口中，将视图 B 上的 accessibilityElementsHidden 设置为 true 会导致 VoiceOver 忽略视图 B 中的元素。这类似于 Android 属性 importantForAccessibility="no-hide-descendants"。

importantForAccessibility （安卓）

在具有相同父级的两个重叠 UI 组件的情况下，默认可访问性焦点可能具有不可预测的行为。'importantForAccessibility' 属性将通过控制视图是否触发可访问性事件以及是否将其报告给可访问性服务来解决此问题。它可以设置为“auto”、“yes”、“no”和“no-hide-descendants”（最后一个值将强制无障碍服务忽略该组件及其所有子组件）。

例如：

<View
  accessibilityElementsHidden={true}
  importantForAccessibility="no-hide-descendants"
>
    <Text>This text won't be read by the screen reader</Text>
</View>

这是有关辅助功能的更多详细信息的来源：React Native - Accessibility