Question

我需要像VoiceOver这样的屏幕阅读器不会识别（或者不是＆＃34;阅读＆＃34;）这个<View>。

例如，假设我们有一个带有此模板代码的简单App：<View><Text>Events</Text></View>。

当我运行此应用程序时，我可以看到＆＃34;事件＆＃34;屏幕上。然后，如果我启用VoiceOver，他会说：＆＃34; Events＆＃34;。好吧，我希望他不能说＆＃34;事件＆＃34;。换句话说，我希望他不能阅读这些事件。就像＆＃34; aria-hidden＆＃34;在HTML中。

有可能吗？

Answer 1

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

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

Answer 2

尝试使用

<View accessibleLabel={""}>...</View>

默认情况下，react-native会将屏幕阅读器文本节点连接起来。通过指定accessibilityLabel，可以为此给定视图禁用此行为。

Answer 3

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

Answer 4

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

accessibilityElementsHidden（iOS）

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

importantForAccessibility（Android）

如果两个重叠的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

Answer 5

尝试view.setVisibility(HIDDEN);

有什么方法可以隐藏＆＃34;屏幕阅读器的视图，例如＆＃34; aria-hidden＆＃34;用HTML做什么？

5 个答案: