Add required-attribute support for fieldsets

[fstrr]

It would be very useful to be able to use the required attribute to mark up content as required in fieldset. I realise that individual form elements, and groups of radio buttons can be marked up as required, but there's no way to do this for groups of checkboxes, which is a gap. Here's an example use case where this would be useful:

<fieldset aria-errormessage="errormsg" required>
  <legend>You've told us you have pets. Which of these do you have?<span aria-hidden="true"> (required)</span></legend>
  <div id="errormsg">Please tell us about your pets.</div>
  <div>
    <input id="cats" name="cats" type="checkbox">
    <label for="cats">Cats</label>
  </div>
  <div>
    <input id="dogs" name="dogs" type="checkbox">
    <label for="dogs">Dogs</label>
  </div>
  <div>
    <input id="fish" name="fish" type="checkbox">
    <label for="fish">Fish</label>
  </div>
</fieldset>

This isn't something that ARIA can be currently used to "patch", as the group role, which relates to the fieldset element, doesn't support aria-required. Adding support for required on fieldsets would make development easier and would hopefully see the ARIA specification updated to match.

[domenic]

It's not clear what semantics would be for this generally. The most straightforward would be to treat it like disabled="" on fieldset, and have it make everything inside the fieldset required="".

I guess you are trying to express that one of the checkboxes is required though. Which would be a totally new capability. Specifying that seems fairly complex as you'd have to figure out how it interacts with explicit required="" annotations, nested fieldsets, radio button groups and select elements which have very different notions of "required" from other controls, etc.

In the meantime note that you can achieve this with some JavaScript, if you are content to ignore all of the complicated cases above that a spec would have to take into account and only care about checkboxes. https://jsbin.com/nucekozegi/1/edit?html,output

[scottaohara]

If allowing required on a fieldset, then I would expected that to work like disabled on a fieldset. It would indicate that every descendant form control in the fieldset would be in the required state. That could be useful in certain situations where the current solution would be to specify every form control with a required attribute...

But that isn't really what this proposal (or previous proposals which have been made to ARIA) is asking for. Rather, as Domenic already mentioned, the concept of a checkbox group where a required number of checkboxes be checked (as it's not always just 1, and no specific checkbox or checkboxes are actually required) seems to be the actual ask. That would require more than just allowing required or even aria-required to be specified on a fieldset.

Regarding the example markup, if the "(required)" text was not set to aria-hidden=true, then the fact that a selection is required would have been communicated, and wouldn't result in every checkbox being announced as required (which again, is not what you'd want to be exposed anyway since there is no requirement that any specific checkbox be checked).

[chrislachance]

I've also been wondering about this and propose the following...

SIMPLE VERSION: Implies that at least one field within the fieldset is valid/non-empty value according to its defined pattern. Fields within do not need a required attribute, nor are they in an error state. The fieldset itself would read back its invalidity like an input does when focus enters it. Custom error styling may work as such... fieldset:invalid input

<fieldset required> <legend>Please complete one</legend> <label for="f1i1">Full name</label> <input type="text" id="f1i1" pattern="[A-Z][a-z]+\s[A-Z][[A-Za-z\s\.]+"> <label for="f1i2">Text with no pattern (just can't also be empty)</label> <input type="text" id="f1i2"> </fieldset>

ADVANCED VERSION: At least 2 items must have valid/non-empty values, but no more than 3
<fieldset required minlength="2" maxlength="3"> <legend>Pick 2 - 3 items</legend> <label for="f2i1"><input type="checkbox" id="f2i1">Cats</label> <label for="f2i2"><input type="checkbox" id="f2i2">Dogs</label> <label for="f2i3"><input type="checkbox" id="f2i3">Birds</label> <label for="f2i4"><input type="checkbox" id="f2i4">Turtles</label> </fieldset>

We could repurpose maxlength & minlength from inputs for fieldsets to capture the range of valid items within.
Looks like RTE in Github junked up the HTML, check it out on this Codepen.

Not every 'required' collection of fields are checkbox specific. For example, one of any categorized search query terms could help pre-filter a set of results. None are required, but at least one is.

[snakysnake]

I think this is important and should be implemented