the <label> tag

This lesson essentially repeats information found on lesson 28 of the "Dive Into Accessibility" site. You may like to have a look at that site, particularly if your forms are complex (there are a couple of links at the end worth following). For a general discussion about how to construct your forms to make them accessible, see WebAIM's guide to building forms. Both the links in this paragraph open in the second browser window.

I said on the page about input types that any "caption" which is placed beside a form box is ordinary text. It might be placed within common tags, such as <p> or table tags, but it is essentially separate from the actual form boxes which are (usually) rendered with the <input> tag. There is a way, however, by which you can bring the input box and the text label into direct association. This is by additionally enclosing the caption in <label> and </label> tags.

Why would you want to do this? The answer is, for the benefit of those users who do not use visual browsers. You can use the Tab key to cycle round all the clickable elements of a page, focussing on each one in turn. But without a <label> all a non-visual browser will see is some stand-alone, untitled form element. Compare these two examples of code: the first is coded without consideration for accessibility:

<p>Enter a password</p>
<input type="password" name="pass" />

This is the same code with full accessibility. Note the additional id attribute (it is a shame that we cannot re-use name here but that's the way it is) and the way the for attribute in the <label> tag creates the relationship:

<p><label for="pass1">Enter a password</label></p>
<input type="password" name="pass" id="pass1" />

For buttons that offer a choice, like radio boxes, you will need to put a separate id in each box, like this:

<input type="radio" name="mf" id="mfm" value="f" />
<label for="mfm">Female</label>
<input type="radio" name="mf" id="mff" value="m" />
<label for="mff">Male</label>

You may then be wondering, what of the label for these choices as a whole? In that case, "What is your sex?" The answer is that you have to use a couple of different tags, <fieldset> and <legend>. <fieldset> groups a series of <input> tags together, and specifically tells the browser "these are a related set". <legend> then acts as the label for the whole set; though this doesn't preclude individual labels for each box. Confused? Try this code (all checkboxes beyond two removed for clarity):

<fieldset>
<legend>Which of these ACOM options have
     you also taken?</legend>
  <table summary="List of ACOM options">
    <tr><td>
      <p><label for="wpt">Wordprocessing
        Techniques</label>
        </p></td>
      <td><input type="checkbox"
        name="options" value="wpt" id="wpt" />
        </td></tr>
    <tr><td>
      <p><label for="dhp">Data Handling and
        Presentation</label>
        </p></td>
      <td><input type="checkbox"
        name="options" value="dhp" id="dhp" />
        </td></tr>
  </table>
</fieldset>

Note that <fieldset> draws a border round the group of boxes. You might like the visual effect this has on your form, or you might find it horrible. If the latter, use form styles to change it. You can also use these to adjust the appearance of <legend> and <label> tags. (These are a good example of tags which have both structural (what it's a label for) and stylistic (what it looks like) information, if you're still struggling with that.)

I guess it's hard to convince people of the usefulness of this kind of thing if they've never had to use non-visual browsers, and/or they know they will never be designing "professional" web sites. But like all other allowances for accessibility, a small amount of extra work on your part can make a mountain of difference to those who need it.

A small additional benefit is that when you use the <label> tag properly this means you can activate a box by clicking on the label, as well as just the box itself (at least, you can in IE). The first of these two radio boxes does not have a <label> tag, the second does: if you've got restricted hand movements, bad vision or just bad hand-eye co-ordination, notice how much easier the second one is to click on! (The nature of the mouse pointer is also a clue here.)

Back to the top

Back to the menu for lesson 9