如何在字段集中正确显示错误消息

Question

我想要一个fieldset-tag 来显示错误消息。

当做类似的事情时：

<fieldset>
  <legend>Some Legend</legend>
  <div role="alert" aria-live="assertive" aria-relevant="all">
    My Error Message
  </div>

  ...
  <!-- formfields -->
</fieldset>

屏幕阅读器没有读取错误消息，但是当将错误消息包装在 <label>-tag 中时，它正在读取它，但感觉不对。

就可访问性而言，在fieldset-tag 中显示错误消息的正确方法是什么？

Answer 1

如果您遵循一些简单的规则，aria-live 区域会很好地工作。

• 带有aria-live 的元素在页面加载时必须存在。也就是说，您不能在页面加载后动态添加该属性。
• 如果使用默认的aria-relevant 值（即，如果您未指定aria-relevant），则只有在更改区域中的文本或添加子DOM 节点时才会宣布更改。在您的情况下，您拥有“全部”，因此也将宣布被删除的子 DOM 节点。请注意，隐藏或取消隐藏元素不会被视为 DOM 中的更改，因此不会被宣布。

一些旁注：

• 一般来说，aria-live="polite" 足以满足大多数情况。 aria-live="assertive" 很少需要，除非是非常紧急的消息。
• 使用role="alert" 会给你一个隐含的aria-live="assertive"。您不必指定aria-live。