[英]React native a11y: visually hide an element but make it available to screenreader
I have a View which contains a key and a value.我有一个包含键和值的视图。 The key is a string and the value is a numeric value, which represents whether something has gone up or down.
键是字符串,值是数值,表示某物是上升还是下降。
Visually, i use a chevron and turn the text to green or red, to show whether the value has gone up or down.在视觉上,我使用 V 形并将文本变为绿色或红色,以显示该值是上升还是下降。 Something similar to the below picture.
类似于下图的东西。
I want to make the chevron accessible to screenreaders, to make sure that screenreader announces "up by" or "down by" when the user focuses on the value.我想让屏幕阅读器可以访问雪佛龙,以确保屏幕阅读器在用户关注值时宣布“向上”或“向下”。 It seems this is possible by adding an accessibility label to the chevron, but the problem in my case is that i need to add accessible={true} to the container element otherwise voiceover does not announce the key and value together, instead it reads the key, moves to the next element on right, and once everything on the right is finished, it comes back and announces the value.
似乎可以通过向雪佛龙添加可访问性标签,但在我的情况下,问题是我需要将accessible={true} 添加到容器元素,否则画外音不会一起宣布键和值,而是读取键,移动到右侧的下一个元素,一旦右侧的所有内容完成,它就会返回并宣布值。 By adding accessible={true}, i make sure that the key and value is announced together as one piece of information, but i lose the ability to add accessibilityLabel on individual children.
通过添加accessible={true},我确保键和值作为一条信息一起公布,但我失去了在单个孩子上添加accessibilityLabel的能力。
On web, i would have solved this problem by adding a screenreader only text which is visually hidden, on the chevron, but i am not really sure how to solve this in react native.在网络上,我会通过在雪佛龙上添加一个仅在视觉上隐藏的屏幕阅读器文本来解决这个问题,但我不确定如何在本机反应中解决这个问题。 Is there a preferred way?
有首选方法吗?
Not deleting the question for others' reference, instead posting this as an answer.不删除问题以供他人参考,而是将其发布为答案。
I was under the impression that when you set accessible={true}
on the parent view, all the children accessibilityLabel
s are ignored, but it turns out that accessible={true}
on the parent just makes the children unavailable for accessibility focus, but the accessibilityLabel
is still respected.我的印象是,当您在父视图上设置
accessible={true}
时,所有子视图的accessibilityLabel
都将被忽略,但事实证明,父视图上的accessible={true}
只会使子视图无法获得可访问性焦点,但是accessibilityLabel
仍然受到尊重。 So in my case, this was easily solved with something like this:因此,就我而言,这很容易通过以下方式解决:
<View accessible={true}>
<Text>
key
</Text>
<Image accessibilityLabel={ diff > 0 ? 'up by' : 'down by' } source={chevron} />
value
</Text>
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.