Why Do Developers Hate The <label> Tag?

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:

 <input type="radio" name="whatever" id="selection1" />

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:




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.

New Method: Transparent Messages

Aza Raskin, over at Humanized, has come up with some code as a less-obtrusive alternative to Javascript alert boxes.

Javascript alerts are not the most elegant solution as they force the browser to stop in it's tracks until the user's clicks OK. This can sometimes mislead a person into thinking the browser has crashed if the alert loses focus.

Transparent Messages were originally conceived by Jef Raskin, one of the original designers of the Macintosh OS, as part of Archy. Archy is a project which aims to create a more "humane" interface betweem humans and computers.

You can download the Javascript code here.