role="radiogroup“和role="radio”真的有必要吗？

Question

有一些ARIA教程网站使用非语义标记和一些javascript来演示role="radiogroup"和role="radio"的使用，例如下面的示例：

<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>

但是，当我们已经有了像这样的语义和无role方法时，使用这些javascript还有什么意义呢：

<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

因为有一些人真的，真的想要为他们的表单控件定制设计，并会用图像和一堆JavaScript替换它们，而不管有没有语义上合适的元素。

当他们这样做时，角色只是允许减轻损害。

Answer 2

在第二个版本中:您需要在ul上使用role="radiogroup“。

或者更好的可访问性:使用一个字段集。

aria不是为了语义，它是为了可访问性。