Florence Maurice

Für Beschriftungen von Formularfeldern ist das label-Element gedacht:

<input type="radio" name="farben" id="rot" value="rot">
<label for="rot">rot</label>

Damit der Bezug zwischen label und input-Element klappt, muss der Wert des for-Attributs des label-Elements mit dem Wert der id des input-Elements übereinstimmen (im Beispiel oben „rot“).

Was nimmt man aber für die Beschriftung einer Gruppe von Radiobuttons?

<was-hier?>Farbe wählen</was-hier?>
<input type="radio" name="farben" id="rot" value="rot">
<label for="rot">rot</label>
<input type="radio" name="farben" id="blau" value="blau">
<label for="blau">blau</label>

Spontan hätte ich am liebsten ein weiteres label-Element eingesetzt, aber das funktioniert natürlich nicht. Und einfach ein Absatz ist nicht aussagekräftig. Das richtige dafür ist die legend eines fieldset, also folgende Struktur:

<fieldset>
<legend>Farbe wählen</legend>
<input type="radio" name="farben" id="rot" value="rot">
<label for="rot">rot</label>
<input type="radio" name="farben" id="blau" value="blau">
<label for="blau">blau</label>
</fieldset>

Gefunden unter anderem bei http://webaim.org/techniques/forms/controls#radio

Dieselbe Lösung eignet sich ebenfalls zur Beschriftung von Checkboxen …