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

Question

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

<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 规范aria-live。

aira-live不用于指示元素的属性何时发生更改。也就是说，使用aria-livea<div>然后更改该 divaria-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

“当发生主动更改时，用户代理或辅助技术可以选择清除排队的更改”

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