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>

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.