读取 aria-live 区域的标签

Question

我有一个定义列表，其中一项可以更改：

// Update dynamic content
setInterval(function() {
  document.getElementById('dynamic-info').textContent++;
}, 3000);

<dl>
  <dt>Static information</dt>
  <dd>Value 1</dd>
  
  <dt>Static information 2</dt>
  <dd>Value 2</dd>
  
  <dt id="dynamic-info-def">Dynamic number</dt>
  <dd id="dynamic-info" aria-live="polite" aria-labelledby="dynamic-info-def">1</dd>
</dl>

我在内容上加上了 aria-live，因为它需要用屏幕阅读器阅读，这很有效，但只有数字被阅读。它需要说 "Dynamic number: 2" 以便用户有上下文。

我不能将 aria-live 放在 <dl> 上，因为那样的内容太多，无法阅读。我尝试在最后一个 dt/dd 对周围放置一个包装器 div，但这是非法的 HTML.

我尝试使用 aria-labelledby（如上所示），但这没有效果（在 Chrome 中使用 VoiceOver）。

如何让直播区域读取关联内容？

Answer 1

指定为 ARIA 实时区域的区域将只读取其内容。它会忽略 aria-labelledby 和 aria-describedby.

您需要调整函数以将整个文本块写入活动区域。

如果您不想让该附加文本可见，请使用 CSS off-screen technique 将其隐藏。

Answer 2

你玩过aria-atomic吗？它会沿着祖先树向上移动，因此必须将其设置在

的 parent 上。在

上设置它不会起作用，因为它是兄弟。但是您可能有一个隐藏的，它是

的 parent，文本为 "dynamic number"。 wuold 必须通过将其高度设置为 1px 而不是真正隐藏它（可见性）来隐藏，因为屏幕无法读取真正隐藏的内容 reader。但是如果只有 1px 高那么它也会隐藏所有 children 。无赖。

您也可以尝试使用蛮力方法并使用 "dynamic number 2" 更新 1px aria-live 。将阅读全文但不会显示。您还可以更新

但不必是 aria-live.

读取 aria-live 区域的标签

Read label of aria-live region

html

accessibility

screen-readers

wai-aria

aria-live