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元素的规范：

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

诸如Region之类的地标使用户可以快速导航到它们。但是在我看来，将所有错误消息添加到该地标列表中只会使它变得混乱。相反，您应该考虑添加role=“alert”。另外，请确保在加载页面上存在具有aria-live的错误容器-即使该容器为空。否则，某些浏览器将不会听取其中的更改。

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

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

1 个答案: