制作 aria-live 区域阅读链接

Question

我想在事件发生时将 link 放入 aria-live 区域。

然而，当画外音读取 aria-live 区域时，它是作为文本读取的，并且不会读取有可点击的 link。

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

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

画外音会在事件发生时读出 hello world，然后将上下文放回到引发事件之前它所在的元素上。

有没有办法让画外音在阅读 aria-live 中的内容时不仅仅是纯文本？

Answer 1

不，这就是 aria-live 的目的 - 它宣布 text 发生了变化。没有公布其他信息，例如角色（link 或按钮或列表）。

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

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

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

• "你好"
• "世界link"
• "link"

（有关“仅限 sr”的信息，请参阅 What is sr-only in Bootstrap 3? class）。

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

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