wai-aria - 使 aria-live 区域读取链接

Question

当事件发生时，我想在 aria-live 区域内放置一个链接。

但是，当画外音读取 aria-live 区域时，它会以文本形式进行读取，并且不会读取到有可点击的链接。

所以我在事件发生时的标记是

<div role="region" aria-live="assertive">
 hello <a href="/world">world</a>
</div>

Voiceover 在事件发生时读取 hello world，然后将上下文放回它在引发事件之前所在的元素上。

有没有办法让画外音阅读 aria-live 中的内容而不仅仅是直接文本？

标签： wai-ariavoiceover

Answer 1

不，那是aria-live- 它宣布更改的文本。没有宣布其他信息，例如角色（链接或按钮或列表）。

您可以“强制”阅读其他文本，但您必须手动执行。所以你可以添加这样的东西：

<div role="region" aria-live="assertive">
 hello <a href="/world">world</a> <span class="sr-only"> link </span>
</div>

所以你会听到“hello world link”，但是当用户手动导航所有元素时（通过使用画外音向右滑动），我会在宣布后删除额外的文本，他们会听到：

• “你好”
• 《世界链接》
• “链接”

（有关“仅 sr”类的信息，请参阅什么是 Bootstrap 3 中的 sr-only？）。

但这并不是一个很好的解决方法。添加新元素时听到“hello world 链接”听起来就像“hello world”是链接，而只有“world”是链接。

如果您多解释一下用户体验，可能会有更好的解决方案来解决您想要实现的目标。