All radio inputs inside of a required radio group have the required attribute. Expected?

[nicksergeant]

We were somewhat surprised to learn that all radio inputs inside of a required radio group also have the required attribute. Here's an example from RadioGroup Validation in the docs:

    <div
      role="radiogroup"
      aria-required="true"
      aria-orientation="vertical"
      id="react-aria700161999-:r6i:"
      aria-labelledby="react-aria700161999-:r6j:"
      class="hyn22G_spectrum-FieldGroup-group A-HlBa_spectrum-Field-field"
    >
      <label class="V2HKpq_spectrum-Radio V2HKpq_spectrum-Radio--quiet">
        <input
          tabindex="0"
          type="radio"
          name="pet"
          required
          class="V2HKpq_spectrum-Radio-input"
          value="dogs"
          title=""
        />
        <span class="V2HKpq_spectrum-Radio-button"></span>
        <span class="V2HKpq_spectrum-Radio-label">Dog</span>
      </label>
      <label class="V2HKpq_spectrum-Radio V2HKpq_spectrum-Radio--quiet">
        <input
          tabindex="0"
          type="radio"
          name="pet"
          required
          class="V2HKpq_spectrum-Radio-input"
          value="cats"
          title=""
        />
        <span class="V2HKpq_spectrum-Radio-button"></span>
        <span class="V2HKpq_spectrum-Radio-label">Cat</span>
      </label>
      <label class="V2HKpq_spectrum-Radio V2HKpq_spectrum-Radio--quiet">
        <input
          tabindex="0"
          type="radio"
          name="pet"
          required
          class="V2HKpq_spectrum-Radio-input"
          value="dragon"
          title=""
        />
        <span class="V2HKpq_spectrum-Radio-button"></span>
        <span class="V2HKpq_spectrum-Radio-label">Dragon</span>
      </label>
    </div>

The MDN docs on radios around the required attribute state:

The required attribute is one which most s share. If any radio button in a same-named group of radio buttons has the required attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.

So it seems like the required attribute should only be used in cases where you want to make one specific radio button required to be selected, vs. on all radio inputs inside of a required radio group. Seems we might only want aria-required on the group, and never on the child inputs?

Actually after re-reading the MDN docs carefully I've answered this entire question... it specifically says if any of the radio inputs have the required attribute, one must be selected but it doesn't need to be the one with the required attribute. 😅

Would love some input from accessibility experts on this one. Thanks!

[nicksergeant]

Actually after re-reading the MDN docs carefully I've answered this entire question... it specifically says if any of the radio inputs have the required attribute, one must be selected but it doesn't need to be the one with the required attribute. 😅

[nicksergeant]

I'd actually like to re-open the discussion here to see if there's any actual value to putting the required attribute on any of the inputs here since RAC is already using aria-required on the radio group.

[snowystinger]

aria-required wouldn't handle native validation, it's only for Assistive technologies.
Is it causing an issue for you?

[nicksergeant]

It's not causing a specific issue to me but I don't rely on assistive tech. I'm a developer and one of my clients brought this up. The MDN docs do specifically say that the aria-required role should be on the radiogroup and not on any of the individual radio elements:

Indicates that one radio within the group must have aria-checked="true" set before the form may be submitted. The required state is specified on the radiogroup element rather than one of the radio elements, unlike when using HTML radio buttons where the required attribute is set directly on one or more radio elements.

[snowystinger]

I apologize, but I'm still confused. We have aria-required on the group, which is for Assistive Technologies.
And we have required on individual radios for native validation. This matches the specs you're citing.

Apologies if I'm overlooking something. What did your client bring up?

[nicksergeant]

@snowystinger here's what's been communicated to us:

The required attribute is not mandatory for a radio button grouping (or any input) that is required to be filled in. It is perfectly fine to use aria-required attribute instead (which is what they are doing on the radio button grouping itself), or you can just tack on the word "required" to the end of the label text and not use either attribute. WCAG does not mandate the mechanism you use to communicate that an input is required, only that you somehow communicate that information to the user.

What MDN is describing is what will happen if you choose to use the required attribute on a radio button grouping. What the required attribute gets you is that it will trigger the browser's built in client-side error handling if the input doesn't have a value when you click the submit button. [...] But this default behavior has been notorious for being inaccessible over the years and I think most accessibility professionals prefer that it not be used (at least not without extensive testing).

Regardless of how accessible the default validation is today, I can see from the example in the RAC documentation that they are not relying on this default behavior and are instead doing their own custom error handling (which is great). In other words, they are not relying on the required attribute to force a selection, thus removing the primary reason for using the required attribute in the first place. Therefore, the required attribute is really just causing most screen readers to announce an unnecessary "required" on each radio button, which is also somewhat illogical since each radio button itself can't be required, it's the group that is required. That's why it is not considered a best practice to put either the required or aria-required attribute on individual radio buttons, and that's why I asked to have it removed.

Emphasis mine. So I think what they're saying is that the individual radio element attributes required is unnecessary because you're correctly setting aria-required on the group and doing error handling in the lib.

[snowystinger]

Regardless of how accessible the default validation is today, I can see from the example in the RAC documentation that they are not relying on this default behavior and are instead doing their own custom error handling (which is great)

This is actually a bit of a misconception. We do use native form validation handling, and we do it by default in RAC. There is also a prop which allows you to change between "native" and "aria" where we do handle everything (validationBehavior). This is mostly to be backwards compatible with React Spectrum, which was built before we did validation handling, but can also be used for realtime validation.

So if you remove those required, you'll notice that the form no longer errors and instead submits.

If you wish to get rid of those native required, you can set Form's validationBehavior to "aria" and you'll see all the inputs no longer have required attributes. Note, you'll have to handle the validation yourself now https://react-spectrum.adobe.com/react-aria/Form.html#validation-behavior

[nicksergeant]

Oh, interesting! Let me look into that 👍