CODEWITHSUNDEEP
htmlradio-buttonaccessibilitywai-aria
Ateş Göral
Ateş Göral

Reputation: 140032

aria-required in a radio group

When I have a mandatory (required) radio group, which element(s) should have the aria-required="true" attribute? Basically, I have a bunch of <input type="radio"> elements that share the same name and are grouped together under a <fieldset>.

  1. Should I put aria-required on the <fieldset>?
  2. Should I put aria-required on each radio?
  3. Or would you say "there should be no such thing as a mandatory radio group; set a default value so that the radio group can never be in non-selected state"? -- perhaps this is the topic for a separate usability discussion.

Upvotes: 9

Views: 4341

Answers (4)

Laura White
Laura White

Reputation: 341

The correct way to handle this is to specify the required attribute on the radiogroup element itself rather than on each radio element.

Upvotes: 1

Nasia Makrygianni
Nasia Makrygianni

Reputation: 886

You might want to consider adding a "required" hint on a <legend> that you put right after the <fieldset>. The same method can be used also for error messages on the radio group. In general stepping away from the aria attributes in the case of groups is a good idea since the experience in different screen readers is quite confusing..

Tenon has done a ton of research on the matter that you can read here. Their general instructions for radio groups and checkbox groups are the next:

  1. Groups of elements should go inside a <fieldset> element and be described by a <legend>.
  2. In order for most screen readers out there to recognise the <legend>, it HAS to be the very next element after the <fieldset> opens. Please do not put any other HTML between the opening tag of the <fieldset> and the <legend>.
  3. Unlike controls such as the <input>, there is no reliable way to connect error messages or content hints to a <fieldset>. These messages must therefore be rendered into the <legend> element. Should this text not need be visible, it can be hidden with a style that visually hides content.
  4. When setting focus to this group, focus should land on the first <input type="checkbox"> or <input type="radio"> of the group.

Upvotes: 1

Jared
Jared

Reputation: 39877

As a screen reader user I would suggest option one or three. I don’t want to hear my screen reader announce “required” every time I change the selection on a radio button. If I’m going through the effort to view the different options having “required” announced on each one will get repetitive quickly. I’d like to have the required attribute on the fieldset element so I know it’s a section of the form that does need to be filled out.

From a usability perspective I prefer to have a default selection since if I see a default I usually skip to the next section of the form assuming the default isn’t obviously wrong. Whether you feel comfortable with providing the user a default choice and not forcing them to make a selection would depend on the importance of the information your application requires and the consequences if that information is wrong.

Upvotes: 14

Rani
Rani

Reputation: 31

I've tried and find that one can not add aria-required to fieldset element.

Upvotes: 3

Related Questions