2009-10-06 10 views
105

ラジオボタンの "label for"パラメータを使用する場合、508 compliant *になるのは正しいですか?ラジオボタンの "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では、連邦政府機関が、障害のある人々にソフトウェアとウェブサイトへのアクセスを提供することを要求しています。

答えて

166

あなたはほとんどそれを手に入れました。 forの値は、あなたがラベル付けされている要素のidでなければなりません

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

:それは、このする必要があります。正しいIDをとのために使用して

+4

あなたの答えは真もちろんですが、マーサは、正しい答えを持っています。両方のMarthaの例は完全に有効なHTML5です。例えば、フレーム内にすべてのものが必要な場合は、CSSを使用して2番目のスタイルをスタイルするほうが簡単です。ラベルを別の場所にしたい場合は、最初にラベルを付けます。しかし、どちらもOKです。宜しくお願いします! –

+4

Hmm ..どのように2つのラジオボタンの間で1つのラベルを切り替えるのですか?/ –

+0

@NilsSens各ラジオとラベルのペアは、IDの –

3

(別の答えにマルク・Wで述べたように)実際にBOTHが508に準拠しているがここでは、実際に準拠していると主張し、example using labels in different waysです。

66

どちらの構造が有効でアクセス可能であるが、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属性が第二のバージョンに任意です(入力が含まれているラベル)、IIRCには、それを含めない限り、ラベルのテキストをクリック可能にしなかった古いブラウザがいくつかありました。最初のバージョン(入力後のラベル)は、隣接兄弟セレクタ+を使用してCSSでスタイルに簡単です:

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

を共有してはならない一意のIDを持つ必要があります.2番目の例では、 "for"属性は必要ありません。 – Ishmael

+4

「for」属性を使用した場合、ボタンのテキストを「クリック可能」にするブラウザのバージョンがいくつかあったと思います。つまり、ラベル内の入力をラップするだけでは不十分です。 – Martha

+0

@Martha - どのブラウザが分かりますか? – Kirkland

関連する問題