WebAIM - Web Accessibility In Mind

E-mail List Archives

Radio buttons using input tag, or aria radiogroup role?

for

From: AutoMagicMike
Date: Apr 25, 2017 2:32PM

Hi everyone.

I've seen developers starting to use the aria roles "radiogroup" and
"radio" as an alternative to
a plain old HTML5 <input> element.

for example using an input tag inside a <fieldset> <legend> -
https://www.w3.org/WAI/tutorials/forms/grouping/#radio-buttons
<input type="radio" name="radio_stations" id="txt" value="radio1" checked>
<label for="radio1">radio1</label>

and radiogroup example at
https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/examples/radio/radio.html

<div role="radio"
aria-checked="false"
tabindex="-1">
radio1
</div>

Both solutions look good and appear to work well with my screen reader
browser combinations.

My understanding is that the solutions which are semantic should be used in
preference to those that are not, and
solutions that are not reliant on JavaScript should be used in preference
to are.
That's two strikes against the aria solution.

Are there any advantages to using the aria approach? better support in
assistive technologies ? mobile devices?

If not, while I understand that both are technically valid the plain old
<input> looks like a better practice.

Thanks

Mike