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

Question

I want to have a fieldset -tag to show an error message.

When doing something like:

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

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

The screen reader isn't reading the error message, but when wrapping the error message inside the <label> -tag it is reading it but it feels wrong.

What would be the proper way to show an error message inside a fieldset -tag in terms of accessibility?

Answer 1

aria-live regions work pretty well if you follow a few simple rules.

• the element with aria-live must exist at page load time. that is, you can't dynamically add that attribute after the page is loaded.
• if using the default aria-relevant value (that is, if you don't specify aria-relevant ), then changes are only announced if you change the text in the region or if you add child DOM nodes. In your case, you have "all" so child DOM nodes that are removed will also be announced. Note that hiding or unhiding elements is not considered a change in the DOM so will not be announced.

A few side notes:

• in general, aria-live="polite" is sufficient for the majority of cases. aria-live="assertive" is rarely needed except for extremely urgent messages.
• using role="alert" gives you an implicit aria-live="assertive" . you don't have to specify aria-live .