Using LABEL in forms

If you do any web design you probably make forms with the FORM element or tag. You can make these forms much much easier for blind people to use with the simple LABEL element or tag, and it makes the form work better for sighted people too! Web accessibility is a big deal nowadays, and using the LABEL element will help blind users and fulfil your legal requirements. Here's a simple guide to how to do it.

Here's some simple HTML code showing a form text input box and the text for it. Note that the input box id is "town": we'll use that later.

Enter the name of your town: <input type="text" id="town">

That works fine for sighted people because you make sure the text is placed next to the input text box, so you can clearly see that "Enter the name of your town:" is the label for the text input box. But blind people, with no way to see how things are laid out on the page, can easily get confused. This is particularly a problem with checkboxes, where the text often comes after the input.

You can solve this problem by using the LABEL element or tag. Just put it round the text that is the label for the text box. I've highlighted the LABEL code in yellow:

<label for="town">Enter the name of your town:</label> <input type="text" id="town">

Notice that the LABEL element has a "for" attribute: you put in there the id of the input text box to be labelled, which in this case is "town". See how they match up:

<label for="town">Enter the name of your town:</label> <input type="text" id="town">

That's all there is to it! Now, when a blind person comes to this text box, their web browser or screen reader will know that the user should be told to "Enter the name of your town:" A blind user can now use the form just like a sighted person.

Here are some examples:

You can put the LABEL after the input instead of before it, if that's what your design needs:

<input type="text" id="age"> <label for="age">Age</label>

In fact, you can put the LABEL anywhere in your HTML code, anywhere you put the text that the sighted person will see, like in this table layout:

<tr>
    <td>
        <label for="promocode">Promotional Code<label>
    </td>
    <td>
    	<input type="text" id="promocode">
    </td>
</tr>

LABEL works with any input types (except buttons, which don't need it!):

<label for="userpassword">Enter your password:</label>
<input type="password" name="userpassword"> 
<label for="requestedsize">Select the size you need:</label>
<select id="requestedsize">
    <option>Large</option><option>Medium</option><option>Small</option>
</select>

So, how does LABEL make your form work better for sighted people too? Well, if you have a LABEL defined for an input, the user just has to click on the LABEL and the input will be activated. For text boxes the cursor will be put in the input. Checkboxes are even cooler: try clicking on the text "Subscribe to our newsletter" below, and see how the checkbox gets ticked and unticked, just like in a native application on your computer!

More about LABEL

This is a very simple guide, but of course there are more details: there are other ways you can use LABEL, and there are some subtleties to how you can get it to work with other elements. This guide will definitely let you create better, more accessible forms, but if you want to take it further here are some links:

Labelling form elements
A guide from Dive Into Accessiblity, including how to make LABEL work in some blog software.
Accessiblity and the Label Tag
A detailed example of the layout of an entire form using the LABEL element and other techniques.
W3C LABEL specification
The formal specification if you're very technical.