阅读咏叹调直播区域的标签

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，因为它需要读到屏幕阅读器，这有效，但只读取数字。它需要说"动态数字：2"，以便用户有上下文。

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

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

如何使实时区域读取关联内容？

Answer 1

指定为 ARIA 活动区域的区域将仅读取其内容。它将忽略aria-labelledby和aria-describedby.

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

如果您不希望显示其他文本，请使用 CSS 屏幕外技术将其隐藏。

Answer 2

你玩过咏叹调原子吗？ 它将沿着祖先树向上走，因此必须将其设置为

的父级。 将其设置为

将不起作用，因为它是同级。 但是你可能有一个隐藏的它是

的父级，以"动态数字"作为文本。 wuold必须通过将其高度设置为1px来隐藏，而不是真正隐藏它（可见性），因为屏幕阅读器不会读取真正隐藏的内容。 但是，如果只有1px高，那么这也将隐藏所有的孩子。 无赖。

您也可以尝试蛮力方法，并使用"动态数字 2"更新 1px aria-live 。 将阅读全文，但不会显示。 您还需要更新您的

但它不必是 aria-live。