Why Do Developers Hate The <label> Tag?

Posted At : December 13, 2006 5:46 PM | Posted By : Joe Danziger
Related Categories: Usability | 3431 Views

One of the most common usability faux pas I find all over the internet is the lack of developers linking up radio buttons with their labels. Why should we be forced to click a tiny little circle when we should be able to click the actual text for that choice?

It's built into the HTML spec so why don't developers use it? Even some of the biggest sites on the web are guilty of this one. I just don't get it.. it's not exactly rocket science.

Just give an ID to your radio button, like so:

then wrap the text that goes with that radio button in a label tag, as such:

<label for="selection1">selection 1</label>

Here's a full example with a few selections to choose from.. notice how you can just click the text to select the choice you'd like:

selection 1
selection 2
selection 3

The full code for that was:

<input type="radio" name="whatever" id="selection1" /> <label for="selection1">selection 1</label><br />
<input type="radio" name="whatever" id="selection2" /> <label for="selection2">selection 2</label><br />
<input type="radio" name="whatever" id="selection3" /> <label for="selection3">selection 3</label><br />

With all of the attention being given to usability in this Web 2.0 world, let's make sure we've got 1.0 covered first.