我需要屏幕阅读器,如画外音不承认(或不“读”)这<View>。例如,假设我们有一个简单的应用程序,其模板代码如下:<View><Text>Events</Text></View>。当我运行这个应用程序时,我可以在屏幕上看到“事件”。然后如果我启用旁白,他说:“事件”。好吧,我希望他不能说“事件”。换句话说,我希望他不能读这个事件。就像HTML中的“aria-hidden”一样。这可能吗?
<View>
<View><Text>Events</Text></View>
yruzcnhs1#
在React Native中,你可以隐藏视图沿着后代,不让屏幕阅读器看到。这个属性依赖于平台。accessibilityElementsHidden(iOS)一个布尔值,指示此辅助功能元素中包含的辅助功能元素是否隐藏。例如,在包含同级视图A和B的窗口中,在视图B上将accessibilityElementsHidden设置为true将导致VoiceOver忽略视图B中的元素。这类似于Android属性importantForAccessibility=“no-hide-descendants”。importantForAccessibility(Android)如果两个重叠的UI组件具有相同的父级,则默认的辅助功能焦点可能具有不可预测的行为。“importantForAccessibility”属性将通过控制视图是否触发辅助功能事件以及是否将其报告给辅助功能服务来解决此问题。可以将其设置为“auto”、“yes”、“no”和“no-hide-descendants”(最后一个值将强制辅助功能服务忽略该组件及其所有子组件)。例如:
accessibilityElementsHidden
importantForAccessibility
<View accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants" > <Text>This text won't be read by the screen reader</Text> </View>
以下是有关无障碍环境的更多详细信息:React Native - Accessibility
apeeds0o2#
将accessible={true}属性设置为父视图怎么样?它将使整个父组成为一个组,您将无法使用画外音聚焦子组。
accessible={true}
kkbh8khc3#
Ryan的答案可以完成这项工作。另外,还有一个accessible={false} prop 。请参阅这里的文档。
accessible={false}
nfg76nw04#
要在react-native中有条件地显示/隐藏视图,请使用单独的render函数来检查条件:
render: function(){ return ( {this.renderOnCondition()} ); }, renderOnCondition: function(){ if(whateverCondition){ return (<View />); } }
efzxgjgh5#
在元素上使用aria-hidden=“true”。这将防止屏幕阅读器阅读元素。它还应该防止在移动的设备上滑动时选择元素。
57hvy0tb6#
试试view.setVisibility(HIDDEN);
view.setVisibility(HIDDEN);
6条答案
按热度按时间yruzcnhs1#
在React Native中,你可以隐藏视图沿着后代,不让屏幕阅读器看到。这个属性依赖于平台。
accessibilityElementsHidden
(iOS)一个布尔值,指示此辅助功能元素中包含的辅助功能元素是否隐藏。例如,在包含同级视图A和B的窗口中,在视图B上将accessibilityElementsHidden设置为true将导致VoiceOver忽略视图B中的元素。这类似于Android属性importantForAccessibility=“no-hide-descendants”。
importantForAccessibility
(Android)如果两个重叠的UI组件具有相同的父级,则默认的辅助功能焦点可能具有不可预测的行为。“importantForAccessibility”属性将通过控制视图是否触发辅助功能事件以及是否将其报告给辅助功能服务来解决此问题。可以将其设置为“auto”、“yes”、“no”和“no-hide-descendants”(最后一个值将强制辅助功能服务忽略该组件及其所有子组件)。
例如:
以下是有关无障碍环境的更多详细信息:React Native - Accessibility
apeeds0o2#
将
accessible={true}
属性设置为父视图怎么样?它将使整个父组成为一个组,您将无法使用画外音聚焦子组。
kkbh8khc3#
Ryan的答案可以完成这项工作。另外,还有一个
accessible={false}
prop 。请参阅这里的文档。nfg76nw04#
要在react-native中有条件地显示/隐藏视图,请使用单独的render函数来检查条件:
efzxgjgh5#
在元素上使用aria-hidden=“true”。这将防止屏幕阅读器阅读元素。它还应该防止在移动的设备上滑动时选择元素。
57hvy0tb6#
试试
view.setVisibility(HIDDEN);