您可以在网页上多次使用aria-live吗?

Question

>我正在创建一个在相关输入下方显示验证错误的从。为了使表单更易于访问，我在div 中添加了 aria-lives 以保存错误消息。拥有多个咏叹调直播会不会使用户变得更糟？

<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容器 - 特别是因为它们是"礼貌的"，它们应该等到安静的时候再给你反馈。无论这对用户来说是否也是一种良好的体验，您都应该简单地使用屏幕阅读器进行测试(或者最好进行用户测试)。

但是，我会删除role=“region”.这是 MDN Web Docs 中 Region 元素的规范：

区域角色应保留给足够重要的内容部分，以便用户可能希望轻松导航到该部分并将其列在页面摘要中。

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

最后，请记住还要切换输入上的aria-invalid=“true/false”，以便为屏幕阅读器提供适当的反馈。