In a past article, I mentioned that the lack of <label> tags bothered me, and managers don’t always know what to look for when evaluating delivered code.

<label> tags are, unfortunately, one of least understood tags among amateur and self-taught web developers. I suspect it is because there are no obvious visual indicators when used. Differences do exist, however. Without peeking at the underlying HTML, can you tell me which of the following sets of radio buttons uses label tags, and which does not?

If you’re not familiar with what the label tag does, (or if you’re using Safari) you may not see the difference. The secret? For most visual browsers, the clickable area to activate the radio button now includes the text associated with the button. Most major operating systems work this way, as the button text is really part of the control, but Internet browsers don’t work that way. The browser doesn’t know what text to associate with radio button unless the developer explicitly associates it—and that’s what the <label> tag does.

There are other benefits too: form usability is improved for users with screen readers or motor disabilities. (See Dive Into Accessibility: Labeling Form Elements.) It’s an easy accommodation to make, and really benefits all users, particularly when you need to associate buttons and labels located in different places on your page—say, if you put them in different table cells (egad!).

Here is the second set of radio buttons again, with the clickable areas highlighted (again, not so for Safari users):

How do you use it? There are two ways: explicitly associate the <label>’s for attribute with the id of any <input> control, or nest the entire input and label text inside a <label> tag. It’s as easy as that. If you want to go a step further, associate access keys with your labels.

or

If you absolutely must duplicate the increased clickable area for Safari users, Chris Cassell has published a Javascript solution designed to do just that.

Posted in Programming, Usability