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

Question

我有一个网站需要完全访问。我们的动态内容位于单个页面上(不会重新加载)并在屏幕上更改。

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

尽管该元素的 aria-label读出后，我遇到了一个问题，其中 role属性被省略。

情况1

<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 屏幕阅读器。

我尝试了很多技巧来解决这个问题:

• 设置aria-hidden="true"致家长和个人 元素导致 Angular 色仍然被省略
• 不使用aria-live="polite"揭示相反的情况 aria-hidden="false" 。然而，这甚至不会被 屏幕阅读器

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

附加 JSFiddle，带有一个简化示例(您可以使用 Apple 屏幕阅读器并单击窗口来收听朗读内容):

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 动态添加元素，您可能会遇到计时问题。然后将子元素添加到该新的事件区域。是否应该立即宣布新添加的子项，或者在“活跃度”生效之前是否需要执行一次显示/刷新周期？这很难说，因为浏览器和操作系统组合的工作方式略有不同。

我发现发现，当我不动态添加该属性时，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旨在宣布文本更改，而不是元素的 Angular 色。