Using the HTML 'label' tag with radio buttons

Does the label tag work with radio buttons? If so, how do you use it? I have a form that displays like this:

First Name: (text field)
Hair Color: (color drop-down)
Description: (text area)
Salutation: (radio buttons for Mr., Mrs., Miss)

I'd like to use the label tag for each label in the left column to define its connection to the appropriate control in the right column. But If I use a radio button, the spec seems to indicate that suddenly the actual "Salutation" label for the form control no longer belongs in the label tag, but rather the options "Mr., Mrs., etc." go in the label tag.

I've always been a fan of accessibility and the semantic web, but this design doesn't make sense to me. The label tag explicitly declares labels. The option tag selection options. How do you declare a label on the actual label for a set of radio buttons?

UPDATE: Here is an example with code:

<tr><th><label for"sc">Status:</label></th>
    <td>&#160;</td>
    <td><select name="statusCode" id="sc">
            <option value="ON_TIME">On Time</option>
            <option value="LATE">Late</option>
        </select></td></tr>

This works great. But unlike other form controls, radio buttons have a separate field for each value:

<tr><th align="right"><label for="???">Activity:</label></th>
    <td>&#160;</td>
    <td align="left"><input type="radio" name="es" value="" id="es0" /> Active &#160;
        <input type="radio" name="es" value="ON_TIME" checked="checked" id="es1" /> Completed on Time &#160;
        <input type="radio" name="es" value="LATE" id="es2" /> Completed Late &#160;
        <input type="radio" name="es" value="CANCELED" id="es3" /> Canceled</td>
</tr>

What to do?

Solution 1:

Does the label tag work with radio buttons?

Yes

If so, how do you use it?

Same way as for any other form control.

You either give it a for attribute that matches the id of the control, or you put the control inside the label element.

I'd like to use the label tag for each label in the left column

A label is for a control, not a set of controls.

If you want to caption a set of controls, use a <fieldset> with a <legend> (and give a <label> to each control in the set).

<fieldset>
  <legend> Salutation </legend>
  <label> <input type="radio" name="salutation" value="Mr."> Mr. </label>
  <label> <input type="radio" name="salutation" value="Mrs."> Mrs. </label>
  <!-- etc -->
</fieldset>

Solution 2:

Ah yes. Here’s how it works.

<label> labels individual fields, hence each <input type="radio"> gets its own <label>.

To label a group of fields (e.g. several radio buttons that share the same name), you use a <fieldset> tag with a <legend> element.

<fieldset>
    <legend>Salutation</legend>

    <label for="salutation_mr">Mr <input id="salutation_mr" name="salutation" type="radio" value="mr"><label>

    <label for="salutation_mrs">Mrs <input id="salutation_mrs" name="salutation" type="radio" value="mrs"><label>

    <label for="salutation_miss">Miss <input id="salutation_miss" name="salutation" type="radio" value="miss"><label>

    <label for="salutation_ms">Ms <input id="salutation_miss" name="salutation" type="radio" value="ms"><label>
</fieldset>

Solution 3:

You can use the aria-role="radiogroup" to associate the controls without using a <fieldset>. This is one of the techniques suggested by WCAG 2.0.

<div role="radiogroup" aria-labelledby="profession_label" aria-describedby="profession_help">
  <p id="profession_label">What is your profession?</p>
  <p id="profession_help">If dual-classed, selected your highest leveled class</p>
  <label><input name="profession" type="radio" value="fighter"> Fighter</label>
  <label><input name="profession" type="radio" value="mage"> Mage</label>
  <label><input name="profession" type="radio" value="cleric"> Cleric</label>
  <label><input name="profession" type="radio" value="theif"> Thief</label>
</div>

However, I noticed that using this technique the WebAim Wave tool to give a warning about a missing <fieldset>, so I'm not sure what AT support for this is like.

Solution 4:

You can't declare a label for a set of buttons, but for each button. In this case, the labels are "Mr.", "Mrs." and "Miss", not "Salutation".

UPDATE
Maybe you should just use another tag for this "label" of yours - since it's not really a label.

<tr>
    <th align="right" scope="row"><span class="label">Activity:</span></th>
    <td>&#160;</td>
    <td align="left"><label><input type="radio" name="es" value="" id="es0" /> Active &#160;</label>
    [... and so on]
</tr>