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

Question

我想要一个fieldset标签来显示错误消息。

在执行类似操作时：

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

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

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

根据可访问性，在fieldset标签内显示错误消息的正确方法是什么？

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。