时间戳

首页 > 解决方案 > aria-live="polite" 不读取与其关联的元素的角色

javascript - aria-live="polite" 不读取与其关联的元素的角色

问题描述

我有一个需要完全访问的网站。我们拥有位于单个页面上的动态内容（不会重新加载）并在屏幕上发生变化。

为了让屏幕阅读器跟上这一点，我添加了一些 JS 逻辑，其中添加了属性aria-hidden="true"oraria-live= "polite"以隐藏和显示目标元素。

虽然元素aria-label被读出，但我遇到了一个role属性被遗漏的问题。

情况一

<div role="button" aria-label="This is a label" aria-hidden="true"></div>

我用js去掉属性，在页面需要读取这个按钮的时候aria-hidden添加aria-live="polite"

这使得屏幕阅读器然后阅读“这是一个标签”

情况2

<div role="button" aria-label="This is a label"></div>

但是，如果从一开始就读取内容而没有隐藏，即没有aria-hidden="true"，它读作“这是一个标签，按钮”

我想要这种行为，但我能够控制这种情况何时发生。

我在最新的 Chrome 上使用 iOS 屏幕阅读器。

我已经尝试了很多技巧来解决这个问题：

非常感谢任何帮助或指导。

附加的 JSFiddle，带有一个简化的示例（您可以使用 Apple 屏幕阅读器并点击进入窗口以收听阅读内容）：

https://jsfiddle.net/qf4jv6g9/2/

标签： javascripthtmlaccessibilitywai-aria

解决方案

到目前为止，所有评论都不错，但都在避免这个问题。不管你用的是真货<button>还是<div role="button">无所谓。使用 a<div>肯定需要做更多的工作，因为您需要tabindex事件处理程序aria-label等，但如果所有这些都存在，那么您使用哪种辅助技术并不重要。

关于aria-live，它并不意味着是一个动态属性。也就是说，它不是您要即时添加的属性。当页面加载并且元素已经aria-live设置时，它的效果最好。

的目的aria-live是宣布对元素（或子元素，如果aria-live在容器上设置）的更改。因此，当页面加载并且正确的元素具有 aria-live 时，无论何时您向元素（或子元素）添加文本或添加/删除子元素或隐藏/取消隐藏子元素，这些更改都会被宣布。但只公布了文本。（请参阅aria-relevant以控制宣布的更改类型。）

aria-live如果您动态添加一个元素，然后将子元素添加到该新的活动区域，您可能会遇到时间问题。新添加的孩子是应该马上公布，还是显示/刷新周期需要经过一次，“live-ness”才会生效？很难说，因为浏览器和操作系统组合的工作方式略有不同。

我发现，当我不动态添加该属性时，aria-live 的效果非常好。

您的小提琴示例根本不适用于 PC 上的 NVDA。也就是说，当显示新按钮时，不会宣布任何内容，这是我所期望的，因为您正在取消隐藏按钮并添加aria-live到它。所以我认为 的目的aria-live有点被误解了。如果您在隐藏按钮周围添加一个容器并且该容器具有aria-live，那么当按钮取消隐藏时，它将被宣布。

我把你的小提琴改成了：

<div aria-live="polite">
  <button aria-hidden="true" class="newButton hidden" role="button">
    New Content
  </button>
</div>

我更改了 JS 以删除该aria-live行

     activeButton.addEventListener('click',function testFunc() {
        //newButton.setAttribute("aria-live","polite");
        newButton.removeAttribute("aria-hidden");
        newButton.classList.remove("hidden");
      }

现在，当我单击“显示”按钮时，我会听到“新内容”。我没有听到“按钮”，但没关系。 aria-live旨在宣布文本更改，而不是元素的作用。

推荐阅读