是否有任何方法可以像 HTML 中的“aria-hidden”一样“隐藏”屏幕阅读器的视图？

Question

我需要像 VoiceOver 这样的屏幕阅读器不识别（或不“阅读”）这个

<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 - 辅助功能

Answer 2

如何设置

accessible={true}

属性到父视图？

这将使整个家长成为一个单独的小组，您将无法使用画外音来关注孩子。

Answer 3

Ryan 的回答完成了这项工作。或者，有一个

accessible={false}

道具。请参阅文档here.

Answer 4

要有条件地在 react-native 中显示/隐藏视图，请使用单独的渲染函数来检查条件：

render: function(){
    return (
        {this.renderOnCondition()}
    );
},
renderOnCondition: function(){
    if(whateverCondition){
        return (<View />);
    }
}

Answer 5

在元素上使用 aria-hidden="true"。这将阻止屏幕阅读器阅读该元素。它还应防止在移动设备上滑动时选择元素。

Answer 6

试试

view.setVisibility(HIDDEN);