web-dev-qa-db-ja.com

ラジオボタンで「label for」を使用する

508準拠 *であるために、ラジオボタンで「label for」パラメーターを使用する場合、以下は正しいですか？

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>

それともこれ？

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

私が尋ねる理由は、2番目の例では、「ラベル」はテキストのみを包含し、実際のラジオボタンを包含しないことです。

* 1973年のリハビリテーション法の508条は、連邦政府機関が障害を持つ人々にソフトウェアとWebサイトのアクセシビリティを提供することを要求しています。

htmlradio-buttonlabelsection508
130
Wilkie

ほぼ手に入れました。これは次のようになります。

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

forの値は、ラベル付けする要素のIDである必要があります。

205
Marc W

どちらの構造も有効でアクセス可能ですが、for属性は入力要素のidと等しくなければなりません。

<input type="radio" ... id="r1" /><label for="r1">button text</label>

または

<label for="r1"><input type="radio" ... id="r1" />button text</label>

for属性は2番目のバージョン（入力を含むラベル）ではオプションですが、IIRCには、ラベルテキストを含めない限りクリックできないラベルの古いブラウザーがいくつかありました。最初のバージョン（入力後のラベル）は、隣接する兄弟セレクター+を使用してCSSでスタイル設定する方が簡単です。

input[type="radio"]:checked+label {font-weight:bold;}
81
Martha

（最初に<label></label>タグのforを説明した他の回答を読んでください。両方のトップの回答は正しいですが、私の挑戦のために、いくつかのラジオボックスがある場合は、選択する必要がありますそれらのため共通名name="r1"のようにただし異なるIDを使用id="r1_1" ... id="r1_2"

したがって、この方法で答えはより明確になり、名前とIDの競合もなくなります。

ラジオボックスのオプションごとに異なるIDが必要です。

<input type="radio" name="r1" id="r1_1" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>
0
Ebrahim