javascript - NVDA 不会读取单个网页上的多个 aria-live 标签。

Question

我在网页上使用多个 aria-live 标签，当网页上显示错误时，NVDA 仅读取第一个错误消息，而不是全部。我有用户 aria-live="assertive"也尝试过 aria-live="polite"但不起作用，任何人都可以提供一些解决方案。下面是我的代码:

<div>
        <input type="text" name="username" tabIndex="0"/>
        <span class="usernameerr" role="alert" aria-live="assertive">Enter User Name</span>
    </div>
    <div>
        <input type="passowrd" name="password" tabIndex="0"/>
        <span class="passworderr" role="alert" aria-live="assertive">Enter Password</span>
    </div>
    <div>
        <input type="text" name="repassword" tabIndex="0"/>
        <span class="repassworderr" role="alert" aria-live="assertive">Renter Password</span>
    </div>
    <div>
        <input type="submit" tabIndex="0"/>
    </div>

我们将不胜感激。

Answer 1

如果您有role=alert，则意味着aria-live=assertive。当您设置aria-live=assertive时，屏幕阅读器可能清除待处理消息的队列。因此，如果您有三个自信区域，它们可能会互相踩踏并清除其他消息。最后一个可能会获胜。

参见https://www.w3.org/TR/wai-aria-1.1/#aria-live 。它说“当发生断言更改时，用户代理或辅助技术可以选择清除排队的更改。”

因此，您可能会在一个屏幕阅读器上听到此问题，而在另一个屏幕阅读器上则不会。您可以通过删除 role=alert 并将 aria-live 更改为 polite 来测试它。 (您说您尝试使用 aria-live=polite 但如果您没有删除 alert Angular 色，那么它仍然是 assertive >.)