title: Labels, checkboxes and radio buttons
body: <p>My web application uses forms laid out as in the example below...</p>
  
  <pre><code>First Name      [____________]
  Last Name       [____________]
  Gender          () Male  () Female
  </code></pre>
  
  <p>The markup I use is something like...</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;label for="firstName"&gt;First Name&lt;/label&gt;&lt;input type="text" id="firstName" /&gt;
  &lt;label for="lastName"&gt;Last Name&lt;/label&gt;&lt;input type="text" id="lastName" /&gt;
  &lt;label&gt;Gender&lt;/label&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Gender&lt;/legend&gt;
    &lt;input type="radio" name="sex" id="sex-m" value="m"&gt;
    &lt;label for="sex-m"&gt;Male&lt;/label&gt;
    &lt;input type="radio" name="sex" id="sex-f" value="f"&gt;
    &lt;label for="sex-f"&gt;Female&lt;/label&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>I have the following issues that I don't know how to solve...</p>
  
  <ol>
  <li><p>I want to have the WHOLE GROUP of radio buttons labelled like any other field (as in the diagram above), but there is nothing to link the label to (i.e. nothing for its "for" attribute, since each radio in the group has its own label just for the value of the individual radio button)  A label without a "for" attribute will not pass accessibility compliance.</p></li>
  <li><p>The &lt;legend&gt; element of the fieldset seems to duplicate the function of the label.  Is this really necessary?  </p></li>
  </ol>
  
  <p>I had thought about styling the &lt;legend&gt; tag to appear as though it's a label, and dispense with the label altogether for the radio button group, but that seems a bit hacky to me, and will also introduce complexities elsewhere in my code (which relies on &lt;label&gt; elements to do some nifty validation message markup and various other things)</p>
  
  <p>Thanks in advance.</p>