Question

我目前有这个aria-live = assertive的div：

<div id="accesibility__ready" aria-live="assertive" aria-atomic="true"></div>

当前，在我的js文件中，我有一种方法来设置页面中所有内容的标签，并使用tabindex（第一个标题），然后使用<p>。此方法完成后，我想通过aria live通知用户，现在他可以使用以下标签导航：

  var ariaAlert = document.getElementById('accesibility__ready');
  ariaAlert.setAttribute('aria-label','Content updated tab navigation ready');

我注意到有时读取aria-live，但是随后它会被所有其他标签（不是aria-live）打断，屏幕阅读器决定以某种方式读取。

我正在使用Chrome和ChromeVox扩展程序。

那么，如何防止aria-live被其他标签打断？

Answer 1

听起来aria-live的使用不正确。如果该元素的内容/子元素将发生更改，则打算在该元素上使用aria-live。这包括在元素本身上添加/删除/更改文本（例如textContent）或添加/删除嵌套在元素下方的DOM元素。有关详细信息，请参见W3 spec on aria-live。

aira-live用于不，用于指示元素的属性何时更改。也就是说，在aria-live上使用<div>，然后更改div的aria-label将不被宣布。

aria-atomic控制发生更改时读取的内容。应该只读取已更改的特定内容（aria-atomic="false"-默认值），还是应该读取整个元素（aria-atomic="true"）。

例如，

<div aria-live="polite">
  this message will self destruct in 
  <span id="counter">X</span> 
  seconds
</div>

未指定aria-atomic（因此使用false的默认值），如果将counter更新为'5'，则仅柜台的号码将被宣布为“ 5”。但是，如果您在aria-atomic="true"

上使用<div>

<div aria-live="polite" aria-atomic="true">
  this message will self destruct in 
  <span id="counter">X</span> 
  seconds
</div>

然后，当您将counter更改为'5'时，您会听到“此消息将在5秒钟内自毁”。

作为一些注意事项。除非您有一条非常重要的消息需要中断正在读取的其他内容，否则您应该始终尝试使用aria-live="polite"。很少有必须使用aria-live="assertive"的情况。使用assertive可能还会清除其他待读取的消息。

https://www.w3.org/TR/wai-aria/#aria-live

“用户代理或辅助技术 MAY 选择在发生肯定性更改时清除排队的更改”

最后，问题的整个前提听起来像是您可以选择使所有标题和段落都可选项（tabindex =“ 0”）。我不知道该选项的目的，您这样做可能有正当的理由，但是如果目的是“帮助”屏幕阅读器用户导航到页面上的所有元素，那么您将在做屏幕读取器用户停用。屏幕阅读器用户已经在屏幕阅读器本身中内置了强大的导航机制。例如，在PC上，JAWS或NVDA用户可以使用“ H”快捷导航键导航到所有标题。或者他们可以显示一个显示所有标题的对话框。他们可以使用类似的快捷键导航至其他各种元素（“ B”移至下一个按钮，“ T”移至下一个表，“ R”或“ D”移至下一个地标，“ L”移至下一个地标）。移至下一个列表，依此类推）。 iOS上的VoiceOver具有旋转器，该旋转器允许对标题，按钮，表格等进行类似类型的导航。因此，只要您的页面使用语义正确的html（例如<h2>作为标题，而不是仅使用样式即可）字体（大字体和粗体），那么应该没有任何功能使所有内容都可以聚焦。

aria-live被其他标签打断了，如何停止这种行为？

1 个答案: