1

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

// 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>因为那将是太多的内容阅读。我尝试在最后一对周围放置一个包装器 div dt/dd，但这是非法的 HTML。

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

如何让实时区域读取相关内容？

4

2 回答 2

2

你玩过aria-atomic吗？它将沿着祖先树向上走，因此必须将其设置在 <dd> 的父级上。在 <dt> 上设置它是行不通的，因为它是同级的。但是您可能有一个隐藏的 <span> ，它是 <dl> 的父级，其中“动态编号”作为文本。<span> wuold 必须通过将其高度设置为 1px 而不是真正隐藏它（可见性）来隐藏，因为屏幕阅读器不会读取真正隐藏的东西。但是如果 <span> 只有 1px 高，那么它也会隐藏所有的孩子。真可惜。

您也可以尝试蛮力方法并使用“动态编号 2”更新 1px aria-live <span>。将阅读全文，但不会显示。您还可以更新您的 <dd> 但它不必是 aria-live。

于 2016-06-12T19:35:01.317 回答
1

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

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

如果您不希望该附加文本可见，请使用CSS 离屏技术将其隐藏。

于 2016-06-11T20:15:20.643 回答