NVDA 未正确宣布 aria-live 区域

Question

我正在使 React 应用程序尽可能易于访问。 但是，我注意到 NVDA 有一些奇怪的行为——我有两个实时区域，我只是无法让 NVDA 正确宣布。 在 Voiceover 上，一切都可以顺利进行。

首先有一个通知组件，它已经像这样生成了 HTML。 NVDA 不会公布通知，Voiceover 会：

<div aria-live="polite" aria-hidden="true/false">
  <article> <-- There might be many of these if there's multiple notifications, and there's none of these if there's no notifications
    <div>
      <div type="alert">
        <div>
          <div>The text here should be announced when shown</div>
        </div>
      </div>
    </div>
  </article>
</div>

如果我从第一个 div 中删除 aria-hidden，NVDA 会读取它，但它在 Voiceover 上变得不可靠。 在第一个 div 中，也有一个 PoseGroup 组件，只是没有显示在生成的 HTML 上。

编辑：我设法通过使用 aria-live="polite" 将整个内容包装到另一个 div 中来实现这一点。 一个有点hacky的解决方案，但你知道...如果有人有更好的解决方案，我正在听。

然后是一个实时聊天，它有这样的 HTML：

<div>
  <ul aria-live="polite"> <-- There are multiple of these depending on number of elements, but always at least one
    <li aria-hidden="true/false"> <--- There are many of these, some hidden from screen reader depending on the component, these are messages, timestamps etc, some of them should be read
      <div>
        <span>
          <div>
            <p aria-hidden="true">Visible message text</p>
            <p aria-hidden="false">Hidden visibility, but contains additional information to screen reader and should be read always</p>
         </div>
        </span>
      </div>
    </li>
  </ul>
</div>

在这里，我使用了多个 aria-live 容器，当前一个容器上有足够的消息时会生成这些容器，这是由于 Voiceover 在元素太多时停止读取，并且此解决方案适用于它。 还应该注意的是，有一个 PoseGroup 组件包装了 li 元素，它没有显示在生成的 HTML 上。 li 元素应该只读取消息，没有时间戳等，这就是它们隐藏 aria 的原因。 无论我尝试什么，NVDA 都不会读取其中的任何内容。 Voiceover 与这种代码完美配合。 我试图将 ul 和 li 转换为 div，但没有成功。

然后是一个表单输入组件，它有一个错误 label 作为活动区域，如下所示：

<label>
  <span>Some text</span>
  <input/>
  <div aria-live="polite">
    <span>This span is conditionally shown if there's an error.</span>
  </div>
</label>

然而，这个组件在 Voiceover 和 NVDA 上都像这样完美地工作，我只是无法理解为什么其他两个没有。 当然，它们更复杂，但它不应该也适用于 NVDA，因为 Voiceover 没有任何困难吗？

我仍然认为自己是一个可访问的菜鸟，并且已经把头撞到墙上好几天了。

Answer 1

实时区域是一种得到很好支持且成熟的可访问性工具，但它们并不是最直观的东西。 您可能会错误地使用它们。

实时区域仅在内容更改时才会公布。 如果在页面加载时活动区域中存在内容，除非内容发生变化，否则不会公布。

我不确定您是否使用aria-hidden作为切换来显示/隐藏实时区域中的内容，但如果是这样，那可能是您的问题的根源。 你的第三个例子没有使用这种技术，它似乎是一种工作。