Are role="radiogroup" and role="radio" really necessary?

Question

There are some ARIA tutorial websites use non-semantic markup and some javascript to demostrate the use of role="radiogroup" and role="radio" such as the following example:

<ul role="radiogroup">  
    <li tabindex="-1" role="radio" aria-checked="false">  
        <img role="presentation" src="radio-unchecked.gif">
        Option1
    </li>  
    <li tabindex="0"  role="radio" aria-checked="true">  
        <img role="presentation" src="radio-checked.gif">
        Option2
    </li>  
</ul>

But what's the point to use those roles when we already have semantic and javascript-less approach like:

<ul>  
    <li>  
        <input  id="opt1" type="radio" name="opt" value="1">
        <label for="opt1">Option1</label>
    </li>  
    <li>  
        <input  id="opt2" type="radio" name="opt" value="2">
        <label for="opt2">Option2</label>
    </li>  
</ul>

Cabot

Answer 1

Because there are some people who really, really want custom designs for their form controls and will replace them with images and a pile of JavaScript regardless of there being semantically appropriate elements.

The roles just allow the damage to be mitigated when they do so.

Extensor

While the first code is semantically correct too, it's a clear example of completely customized controls that work with JavaScript. The "aria" properties and attributes are included for accessibility (screen readers and other technologies) like @Denis Chenu said in his answer. For those interested, here's more info: [link] (w3c.github.io/aria-in-html) – Cutshall

Answer 2

In the second version : you need a role="radiogroup" on the ul.

Or better for accessibility : use a fieldset.

aria is not for semantic, it's for accessibility.

Xerarch

Fieldsets are difficult and in some cases impossible to style particularly with flexbox – Kirbykirch

And ? Still : fieldset is better for a11y … role can replace but not better. – Xerarch