Radio buttons and checkboxes are similar to text entry fields except that for these input elements, the text should be just to the right.
Here is the way checkboxes should look: Checkboxes and radio buttons should be programmatically linked, like text entry fields, using the label element.
In the example above, the fact that prompts and input elements are in different table cells just adds to the requirement that those prompts be identified with the label element. Here is the HTML for the second radio button with the appropriate label element included:
<tr valign="top"> <td align="right"> <input type="radio" name="user" value="returning" id="r2" /> </td><td> <label for="r2">I am a returning customer:</label>< and <label for="pass">my password is:</label>< <input type="password" size="30" id="pass" /> </td> </tr>
The last input field is a password field (type="password") and screen readers can inform the user of that fact. The explicit labeling with the label element reinforces that association.
Always position prompting information close to and, in this case, to the right of any radio button or checkbox. And always programmatically connect the prompting information with the control using the label element with for and id attributes.
There is another construct introduced in HTML 4.0 that is especially important for radio buttons and to a lesser extent checkboxes. This is the combination of fieldset and legend elements. The fieldset element is a container that groups form controls, and the legend element gives a name (or legend) to the group. So the radio buttons above (male and female) could be placed in a fieldset with the legend, gender. If this is done, the question to be answered by the radio buttons is the legend, and that question is programmatically tied to the radio buttons. Screen readers today will read the legend with each control in the fieldset which is great for "gender male" and "gender female" but can become tiresome when the legend is longer and when the fieldset includes many controls. Here is the way the gender example looks.
And here is the code.
<fieldset> <legend>Gender?</legend> <input type="radio" id="m" name="g" /><label for=â?mâ?>Male</label> <input type="radio" id="f" name="g" /><label for=â?fâ?>Female</label>d </fieldset>
So for now screen readers announce the legend for every control in the fieldset. Hopefully, that will be modified in the future so that the legend is spoken for the first control in the fieldset, and there is a simple "where-am-I" type key that would include the legend for any control in the fieldset.
It is possible to obtain very interesting styling of the fieldset/legend code. Check out the Man in Blue web site.
This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers Course. We also offer many other Web Accessibility Training courses. Sign up today to get help from a live instructor.