你能在一个网页上多次使用 aria-live 吗？

Question

我正在创建一个验证错误显示在相关输入下方的来源。为了使表单更易于访问，我已将 aria-lives 添加到 div 以保存错误消息。拥有多个 aria-live 是否会使用户的情况变得更糟？

<div
    id="awesome-id">
    <label for="awesome-id--input">
        This is a label
    </label>
    <input
        type="tel"
        id="awesome-id--input"
        required>
    <div
        role="region"
        aria-live="polite"
        id="awesome-id--error-message">
    </div>
</div>

<div
    id="another-id">
    <label for="another-id--input">
        This is another label
    </label>
    <input
        type="tel"
        id="another-id--input"
        required>
    <div
        role="region"
        aria-live="polite"
        id="another-id--error-message">
    </div>
</div>

Answer 1

您可以有多个 aria-live 个容器 - 特别是因为它们“有礼貌”，它们应该等到安静后再给您反馈。这对您的用户来说是否也是一种良好的体验，您应该简单地使用 screen-reader 进行测试（或者，最好进行 user-tests）。

但是，我会删除 role=“region”。这是 MDN Web Docs:

处的 Region 元素的规范

The region role should be reserved for sections of content sufficiently important that users will likely want to navigate to the section easily and to have it listed in a summary of the page.

Region 等地标允许用户快速导航到它们。但是在我看来，将所有错误消息添加到该地标列表只会使它变得混乱。相反，您应该考虑添加 role=“alert”。此外，确保具有 aria-live 的错误容器出现在加载页面上 - 即使它是空的。否则某些浏览器将不知道监听它的变化。

最后，请记得在输入上切换 aria-invalid=“true/false” 以向 screen-reader 提供适当的反馈。

你能在一个网页上多次使用 aria-live 吗？

Can you use aria-live more than once on a webpage?

accessibility

aria-live