Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我已将aria-live放在内容上，因为需要将其读取到屏幕阅读器，该屏幕阅读器有效，但只读取该数字。它需要说＆＃34;动态数字：2＆＃34;所以用户有上下文。

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

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

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

Answer 1

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

您需要调整功能，将整个文本块写入实时区域。

如果您不希望其他文字可见，请使用CSS off-screen technique隐藏它。

Answer 2

你玩过aria-atomic吗？它将向上走到祖先树，因此它必须设置在＆lt; dd＆gt;的父级上。在＆lt; dt＆gt;上设置它不会工作，因为它是一个兄弟姐妹。但是你可能有一个隐藏的＆lt; span＆gt;这是＆lt; dl＆gt;的父母。以“动态数字”作为文本。＆lt; span＆gt; wuold必须通过将其高度设置为1px而不是真正隐藏它（可见性）来隐藏，因为屏幕阅读器无法读取真正隐藏的内容。但是如果＆lt; span＆gt;只有1px高，那将隐藏所有的孩子。长号。

您也可以尝试使用暴力方法并使用1px aria-live＆lt; span＆gt;用“动态数字2”更新。将读取全文但不会显示。您还要更新＆lt; dd＆gt;但它不一定是咏叹调。

阅读咏叹调生活区域的标签

2 个答案: