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

Question

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

为了让屏幕阅读器跟上这一点，我添加了一些 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"

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

情况2

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

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

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

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

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

• 将aria-hidden="true"设置为父元素和单个元素会导致角色仍然被省略
• 不使用aria-live="polite"来显示，而是使用相反的aria-hidden="false" 。 然而，这甚至不会被屏幕阅读器接收到

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

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

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

Answer 1

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

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

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

如果您使用aria-live动态添加元素，然后将子元素添加到该新的活动区域，则可能会遇到时间问题。 新添加的孩子是否应该立即宣布，或者显示/刷新周期是否需要 go 在“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旨在宣布文本更改，而不是元素的作用。