Is aria-required allowed on radio buttons or checkboxes?

Question

I'm using the axe Chrome extension to check for accessibility and I am receiving a violation on my radio buttons and check boxes. Looking at the W3C documentation for "aria-required", you can find it here: W3C on aria-required, neither input is listed for the used roles.

According to this question: HTML5: How to use the “required” attribute with a “radio” input field, you just need to mark one radio button with required. However, I am trying to use aria with older browsers and I get a violation Elements must only use allowed ARIA attributes saying that "aria-required" is not allowed on any of my inputs of type radio or checkbox with aria-required.

Is this a discrepancy with the tool, does the HTML5 required work slightly different, or is aria-required actually not allowed on radios or checkboxes?

Answer 1

As indicated in the wai-aria documentation aria-required can be used on radiogroup elements.

You can set a fieldset (with the corresponding aria-required attribute).

 <fieldset aria-required="true">
    <legend>Do you like ARIA? (mandatory question)</legend>
    <input type="radio" name="answer" required="required" value="Yes"/>
    <input type="radio" name="answer" required="required" value="No"/>
 </fieldset>

Note that you have to set both the aria-required and required attributes and explicitely indicate that this field is mandatory.

You could also have used a <div role=radiogroup> if you weren't using proper HTML inputs (see comment below)