Extend label element with type attribute to let it set descriptions and error messages

All form elements need labels, but it’s also common for them to have descriptions and inline errors. I propose extending the label element with a type attribute that takes these values:

  • label (the default so all old labels are still regular labels)
  • description
  • error

A label type=description sets the aria-description instead of the aria-label of its element, so

<label for=elm>Label</label>
<input id=elm>
<label type=description for=elm>Description</label>

is almost equivalent to

<label for=elm>Label</label>
<input id=elm aria-labelledby=elm-descr>
<span id=elm-dscr>Description</span>

with the difference that clicking the description would focus the input in the first example but not the second.

type=description paves a cowpath and makes a common case simpler while reducing the need for one off id attributes.

I’m not sure exactly what the appropriate behavior is for a label of type=error.

There are many considerations here and I’m not informed enough to get them all right, so it would be great if html just did it for me :smiley:

It would be great if adding (or appending to) a label type=error with javascript managed live announcements automatically and it still did something reasonable when a page loads with an error label already in place due to server side validation failures.

It should also have an analogue to work for errors that apply to the form in general and to fieldsets not just individual form elements. I have no proposal for that here and am simply noting the related issue.

Maybe this requires extensions to aria to add special error primitives that just do the right thing? Maybe there is no sensible way to handle this in all cases and type=error is the wrong thing to do. If so, type=description would still be useful but it’s understandable if it’s seen too minor a gain to be worth adding.

1 Like