wake-up-neo.net

Verwenden von "Beschriftung für" für Optionsfelder

Wenn Sie den Parameter "Bezeichnung für" für Optionsfelder verwenden, um 508-konform * zu sein, ist Folgendes korrekt?

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

oder ist das

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

Der Grund, den ich frage, ist, dass "label" im zweiten Beispiel nur den Text und nicht das eigentliche Optionsfeld umfasst.

* Gemäß Section 508 des Rehabilitationsgesetzes von 1973 müssen die Bundesbehörden behinderten Menschen den Zugang zu Software und Websites ermöglichen.

htmlradio-buttonlabelsection508
130
Wilkie

Sie haben es fast geschafft. Es sollte so sein:

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

Der Wert in for sollte die ID des Elements sein, das Sie beschriften.

205
Marc W

Jede Struktur ist gültig und zugänglich, aber das for -Attribut sollte gleich dem id des Eingabeelements sein:

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

oder

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

Das for -Attribut ist in der zweiten Version optional (Label mit Eingaben), aber IIRC gab es einige ältere Browser, die den Label-Text nur dann anklickbar machten, wenn Sie ihn eingeschlossen haben. Die erste Version (Label nach Eingabe) lässt sich mit CSS mit dem nebenstehenden Geschwister-Selektor + Einfacher gestalten:

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

(Lesen Sie zuerst die anderen Antworten, die das for im <label></label> Stichworte. Nun, beide Antworten sind korrekt, aber für meine Herausforderung war es, wenn Sie mehrere Optionsfelder haben, sollten Sie diese auswählen ein gebräuchlicher Name wie name="r1"aber mit anderen IDsid="r1_1" ... id="r1_2"

Auf diese Weise wird die Antwort klarer und die Konflikte zwischen Namen und IDs werden ebenfalls beseitigt.

Sie benötigen unterschiedliche IDs für unterschiedliche Optionen der Optionsbox.

<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