5

いくつかのARIAチュートリアルWebサイトでは、非セマンティックマークアップを使用し、次の例のように、の使用role="radiogroup"を実証するためにいくつかのjavascriptを使用しています。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>
4

2 に答える 2

9

フォームコントロールのカスタムデザインを本当に望んでいて、意味的に適切な要素があるかどうかに関係なく、それらを画像やJavaScriptの山に置き換える人がいるからです。

役割は、そうするときに被害を軽減することを可能にするだけです。

于 2012-06-21T09:44:44.563 に答える
7

2番目のバージョンでは、ulにrole="radiogroup"が必要です。

またはアクセシビリティのためにより良い：フィールドセットを使用します。

ariaはセマンティック用ではなく、アクセシビリティ用です。

于 2015-12-18T17:40:01.153 に答える