Meine Webanwendung verwendet Formulare, die wie im folgenden Beispiel dargestellt sind ...

First Name      [____________]
Last Name       [____________]
Gender          () Male  () Female

Das Markup, das ich benutze, ist so etwas wie ...

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<label>Gender</label>
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
</fieldset>

Ich habe die folgenden Probleme, die ich nicht lösen kann ...

Ich möchte, dass die Optionsfelder der GANZEN GRUPPE wie in jedem anderen Feld beschriftet werden (siehe Abbildung oben), aber es gibt nichts, mit dem die Beschriftung verknüpft werden kann (dh nichts für das Attribut "für", da jedes Radio in der Gruppe sein eigenes hat eigenes Label nur für den Wert des einzelnen Optionsfelds) Ein Label ohne "for" -Attribut wird die Barrierefreiheit nicht erfüllen.

Das <legend> -Element der Feldmenge scheint die Funktion der Beschriftung zu duplizieren. Ist das wirklich nötig?

Ich hatte darüber nachgedacht, das <legend> -Tag so zu gestalten, dass es wie eine Bezeichnung aussieht, und auf die Bezeichnung für die Optionsfeldgruppe zu verzichten, aber das scheint mir ein bisschen hacky zu sein, und wird auch an anderer Stelle in meinem Code (der stützt sich auf <label> -Elemente, um ein geschicktes Markup für Validierungsnachrichten und verschiedene andere Dinge durchzuführen)

Danke im Voraus.