有什么方法可以 "hide" 屏幕阅读器的视图，就像 "aria-hidden" 在 HTML 中所做的那样？

Question

我需要像 VoiceOver 这样的屏幕阅读器不识别（或不"read"）这个 <View>。

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

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

可能吗？

Answer 1

尝试view.setVisibility(HIDDEN);

Answer 2

有条件地show/hide react-native 中的视图，使用单独的渲染函数来检查条件：

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

Answer 3

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

Answer 4

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

accessibilityElementsHidden (iOS)

A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden. For example, in a window that contains sibling views A and B, setting accessibilityElementsHidden to true on view B causes VoiceOver to ignore the elements in the view B. This is similar to the Android property importantForAccessibility="no-hide-descendants".

importantForAccessibility (Android)

In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The ‘importantForAccessibility’ property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to ‘auto’, ‘yes’, ‘no’ and ‘no-hide-descendants’ (the last value will force accessibility services to ignore the component and all of its children).

例如：

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

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

Answer 5

如何为 parent 视图设置 accessible={true} 属性？

这将使整个 parent 成为一个单独的组，并且您将无法使用画外音 children 集中注意力。

有什么方法可以 "hide" 屏幕阅读器的视图，就像 "aria-hidden" 在 HTML 中所做的那样？

Is there any way to "hide" a View to Screen Readers, like "aria-hidden" does in HTML?

android

screen-readers

ios

react-native