aria-live 被其他标签打断,如何停止这种行为?

aria-live is interrupted by other labels, how to stop this behavior?

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

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

目前在我的 js 文件中,我有一种方法可以使用 tabindex(第一个标题)然后 <p> 设置页面中的所有内容。完成此方法后,我想通过我的 aria live 通知用户他现在可以使用 tab:

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

我注意到有时 aria-live 被读取但随后被所有其他标签(不是 aria-live)打断,屏幕阅读器不知何故决定读取。

我正在使用 Chrome 和 ChromeVox 分机。

那么如何阻止 aria-live 被其他标签打断?

听起来 aria-live 没有被正确使用。如果某个元素的 contents/children 会发生变化,则 aria-live 将用于该元素。这包括元素本身的 adding/removing/changing 文本(例如 textContent)或嵌套在元素下的 adding/removing DOM 元素。有关详细信息,请参阅 W3 spec on aria-live

aira-live 而不是 用于指示元素的属性何时更改。也就是说,在 <div> 上使用 aria-live 然后更改 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”。但是,如果您在 <div>

上使用 aria-atomic="true"
<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

"User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs"

最后,你的问题的整个前提听起来像是你有一个选项可以使所有标题和段落都可以标记 (tabindex="0")。我不知道该选项的目的,您可能有这样做的正当理由,但如果目的是“帮助”屏幕 reader 用户导航到您页面上的所有元素,您会正在做屏幕 reader 用户 disservice。 Screen reader 用户已经在 screen reader 本身中内置了很好的导航机制。例如,在 PC 上,JAWS 或 NVDA 用户可以使用 'H' 快速导航键导航到所有标题。或者他们可以显示一个显示所有标题的对话框。他们可以使用类似的快捷键导航到各种其他元素([​​=60=] 移动到下一个按钮,'T' 移动到下一个 table、'R' 或 'D' 移动到下一个地标,'L' 移动到下一个列表,等等)。 iOS 上的 VoiceOver 具有允许类似类型导航到标题、按钮、table 等的转子。所以只要您的页面使用语义正确的 html(例如 <h2> 用于标题而不仅仅是使字体更大和更粗的样式),那么如果没有使所有内容都可聚焦的功能,您应该没问题。