Correct way to group checkboxes and radio buttons

Question

I have a list of radio buttons and I know that according to W3C standards, all <form> controls should have labels associated with them. I did it this way:

<label class="radio-inline">
    <input id="foo1" name="gender" value="M" type="radio"> Male
</label>
<label class="radio-inline">
    <input id="foo2" name="gender" value="F" type="radio"> Female
</label>

However I would also like to have a 'label' that tells users that these two radio buttons are for the gender field. I know that <label> is not an option here since one <label> is associated with one form control only. I googled around and found that using <fieldset> and <legend> is the way to go:

<fieldset class="form-group">
    <legend class="legend-label">Gender</legend>
    <label class="radio-inline">
        <input id="foo1" name="gender" value="M" type="radio"> Male
    </label>
    <label class="radio-inline">
        <input id="foo2" name="gender" value="F" type="radio"> Female
    </label>
</fieldset>

where I used CSS to style the legend.legend-label to be displayed like a label:

.legend-label {
    display: inline-block;
    width: inherit;
    padding: inherit;
    font-size: inherit;
    color: inherit;
    border: inherit;
    border-bottom: inherit;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}

Is this the right way to group radio buttons or checkboxes?

Answer 1

As far as the HTML is concerned there is no "right way" to group them, both of your examples are fine and you could add a header for the group in any which way you like... however, as far as semantics and especially accessibility are concerned, nesting in a <fieldset> with a <legend> is correct and recommended.

The use of fieldsets and legends also improves accessibility when the page is rendered non-visually (for instance by a screenreader where without a legend the context may be missing).

I've come across a lot of confusion regarding this matter, since many developers appear to avoid using fieldsets entirely, relying only on labels... which, to be fair, is sufficient in many cases. Still, this leads new developers to incorrectly question the validity of fieldsets. As stated on w3c.org:

Authors sometimes avoid using the fieldset element because of the default display in the browser, which draws a border around the grouped controls. This visual grouping is also useful and authors should seriously consider retaining it (or some form of visual grouping). The visual effect can be modified in CSS by overriding the "border" property of the fieldset and the "position" property of the legend.

If your input items are related and grouping them aids in making the information easier to understand, then by all means go the extra step to adjust your CSS and use a fieldset. The article on w3c.org also states:

Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field.

So in your example of a gender selection radio input, a fieldset makes perfect sense.

---

For more information on when and when not to use fieldsets see the examples at w3.org.