Android Talkback 大声朗读视觉上位于输入上方的文本
我正在尝试优化屏幕阅读器的一些组件，但是 Android Talkback 被证明是一个挑战...
这是一个非常简化的代码示例：
<div class="wrapper">
<form>
<span role="presentation" aria-hidden="true">
This should not be read by Talkback
</span>
<input aria-label="This should be read by Talkback" />
</form>
</div>
跨度内的文本是动态更新的，并且绝对位于输入上方- 只是看起来像一个动画占位符，实际上并没有被屏幕阅读器阅读。这就是 aria-label 的用途。然而，TalkBack 似乎仍然识别该跨度 - 因此它首先读取 aria-label 的内容，然后继续读取该跨度中的文本...角色“presentation”或角色“none”并没有阻止这种情况，移动也没有阻止这种情况文本距离输入更远。 （例如，在表格之外）。有什么办法可以防止这种情况发生吗？
I am trying to optimize a few components for screen readers, however Android Talkback proves to be a challenge....
Here is a very simplified example for the code:
<div class="wrapper">
<form>
<span role="presentation" aria-hidden="true">
This should not be read by Talkback
</span>
<input aria-label="This should be read by Talkback" />
</form>
</div>
The text inside the span is updated dynamically, and is positioned absolutely over the input - just to appear like an animated placeholder, without actually being read by screen readers. That is what the aria-label is for. However, TalkBack still seems to recognize the span - so it reads the content of the aria-label first, then continues reading the text in the span... role "presentation" or role "none" did not prevent this, neither did moving the text even further from the input. (For example, outside the form). Is there any way to prevent this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
role属性仅更改 Talkback 和其他屏幕阅读器宣布的元素的类型。将其设置为presentation或none只是删除元素的语义类型。默认情况下没有本机角色，因此它本质上是隐式的presentation/none，并且不会产生任何效果。aria-hidden是关键。它将向屏幕阅读器隐藏该元素。 （CSSdisplay:none和visibility:hidden也会对屏幕阅读器隐藏元素，但它也会使该元素对有视力的用户不可见。）您的代码示例应该可以工作用 Talkback 就可以了。但是，您提到您动态更改
的内容。这不是问题，但是当您更新文本时，aria-hidden是否有可能被删除？我在 Android 上使用了 aria-hidden ，没有遇到任何问题。
The
roleattribute only changes the type of element that Talkback and other screen readers announce. Setting it topresentationornonejust removes the semantic type of element. A<span>does not have a native role by default so it's essentially presentation/none implicitly and won't have any effect.aria-hiddenis the key. It will hide the element from the screen reader. (CSSdisplay:noneandvisibility:hiddenwill also hide an element from the screen reader but it also makes the element invisible to sighted users too.)Your code example should work just fine with Talkback. However, you mentioned that you dynamically change the contents of the
<span>. That's not a problem but is there a chance that when you updated the text, thearia-hiddengot removed?I have used
aria-hiddenon Android without any trouble.我的示例中的解决方案已经足以解决问题。
aria-hidden 会阻止跨度成为焦点，并且如果跨度位于之前（而不是之后），TalkBack 不会将文本解释为输入的一部分。
The solution in my example was already enough to fix the issue.
aria-hidden prevents the span being focusable, and if the span is located before (and not after), TalkBack will not interpret the text as being part of the input.