8

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?

Community
  • 1
  • 1
zero298
  • 25,467
  • 10
  • 75
  • 100
  • 1
    Radio buttons is straightforward enough. Put them in a container element, and give the container element a role of "radiogroup". Add the aria-required attribute to the same container element. Check boxes, no its not allowed. Don't know why. – Alohci Dec 16 '15 at 01:27
  • For checkboxes, regardless if checked or not a value is passed to through the form. If you want to communicate that the user must check a checkbox to proceed / submit, then such a message should be associated through us of the aria-describedby attribute pointing to a text container (via that container's ID attribute). – Michael Mistak Mar 15 '18 at 03:00

1 Answers1

13

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)

Adam
  • 17,838
  • 32
  • 54
  • radiogroup is NOT a permitted role for the fieldset element, per the HTML recommendation. https://www.w3.org/TR/html52/sec-forms.html#elementdef-fieldset – andrewmacpherson Aug 15 '19 at 15:16
  • The radiogroup role isn't necessary here. The purpose of the radiogroup role is to programatically specify which radios belong to which radio button group, so that the browser can build the accessibility tree correctly. It's necessary when the radios aren't proper HTML inputs. However with HTML ``, the radio button group is computed from the `name` attribute. – andrewmacpherson Aug 15 '19 at 15:21
  • @andrewmacpherson you're right, but it will change soon https://github.com/w3c/html-aria/commit/137be3852f9343a416cf88f701d40c7167e22e22 – Adam Aug 16 '19 at 10:21
  • If `fieldset` supports `role="radiogroup"` then it should also support `aria-required` attribute [as per this MDN doc on aria-required](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required#associated_roles). I don't see `aria-required` attribute mentioned for `fieldset (role="group")` in this document. – Ritesh Jagga Dec 23 '22 at 15:43