时间戳

首页 > 解决方案 > aria-live 被其他标签打断，如何阻止这种行为？

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

问题描述

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

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

目前在我的 js 文件中，我有一种方法可以使用 tabindex（第一个标题）然后是<p>'s. 一旦这个方法完成，我想通过我的 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 被其他标签打断呢？

标签： accessibilitywai-aria

解决方案

听起来好像没有aria-live正确使用。 aria-live如果该元素的内容/子元素将更改，则旨在用于该元素。这包括添加/删除/更改元素本身的文本（例如textContent）或添加/删除嵌套在元素下的 DOM 元素。有关完整详细信息，请参阅W3 规范。aria-live

aira-live不用于指示元素的属性何时更改。也就是说，aria-live在 a 上使用<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”，则只会公布 counter 的值“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>标题而不是样式以使字体更大和更粗） ，那么您应该可以没有使所有内容都可聚焦的功能。

推荐阅读