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

Question

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

为了 screen-reader 跟上这一点，我添加了一些 JS 逻辑，其中添加了属性 aria-hidden="true" 或 aria-live= "polite" 以隐藏和显示目标元素。

尽管元素的 aria-label 已读出，但我运行遇到 role 属性被遗漏的问题。

情况一

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

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

这使得 screen-reader 然后阅读 “这是一个标签”

情况2

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

但是，如果内容是从 get-go 中读取而没有被隐藏，即没有 aria-hidden="true"，则它显示为 “这是一个标签，按钮”

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

我在最新的 Chrome 上使用 iOS 屏幕 reader。

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

将 aria-hidden="true" 设置为 parent 和个人元素导致角色仍然被省略
不使用aria-live="polite"来揭示而是相反 aria-hidden="false"。然而，这甚至不会被 screen-reader

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

额外的 JSFiddle，带有一个简化的示例（您可以使用 Apple 屏幕reader 并单击进入 window 以收听阅读的内容）：

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

Answer 1

到目前为止所有的评论都不错，但都在避免这个问题。无论您使用真正的 <button> 还是 <div role="button"> 都没有关系。使用 <div> 当然需要做更多的工作，因为您需要 tabindex 和事件处理程序以及 aria-label 等等，但是如果所有这些都在那里，辅助技术是哪一个并不重要你用。

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

aria-live 的目的是宣布对元素（或 child 元素的更改，如果 aria-live 设置在容器上）。因此，当页面加载并且正确的元素具有 aria-live 时，您可以随时向该元素（或 child 元素）或 add/remove child 元素或 [=56] 添加文本=] child 元素，这些更改将会公布。但只公布了 text。（请参阅 aria-relevant 以控制公布的更改类型。）

如果您使用 aria-live 动态添加元素，然后将 child 元素添加到新的实时区域，则可能运行出现计时问题。新加入的children是应该马上公布还是display/refresh周期需要经过一次才能让“live-ness”生效？很难说，因为浏览器和操作系统组合的工作方式略有不同。

我发现 aria-live 在我不动态添加该属性时效果很好。

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

我将你的 fiddle 更改为：

<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 是为了宣告文本的变化，而不是元素的作用。

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

aria-live="polite" not reading roles of elements it is associated with

html

javascript

accessibility

wai-aria