Skip to content

Web Usability Pet Peeve #37: label is your friend

by aaron on August 3rd, 2006
I am a bad little radio button


Notice the difference in the behavior of these two radio buttons? Try clicking on the text that accompanies the first radio button, and then try the second one. When you use a Windows application or a Mac application, the text associated with a checkbox or radio button can be clicked on to select the given control.

With web apps, it’s necessary to use the label tag in order to achieve behavior identical to the Mac or Windows. This tag has been around since HTML 4.0, which has been around for about a bajillion years, by Web standards. The point is that no one has an excuse for not properly supporting the label tag correctly.

Most big web companies do. Google does. So does Microsoft.

Some companies are naughty. Apple can’t figure out how to use label, which is probably because their web browser doesn’t support it (lame!). Fortunately, it’s possible to hack around the lack of this feature by adding a good chunk of Javascript to your page (lame that you have to do this!).

Possibly Related Posts:


From → Accessibility, Usability, Web Design

  • http://www.brethorsting.com/uidesign/2006/09/an_auspicious_number.html Aaron’s UI Design Blog

    An auspicious number

    Back in July, I decided to create a new weblog where I could share my thoughts on UI design and User Experience (especially the snarkier ones) with the world, and keep my writing skills (shabby though they may be) from…

  • http://tombarta.wordpress.com/ Tom Barta

    Hear, Hear! The poor elements label, fieldset, and legend should all be used more. One hidden benefit I have discovered with using labels properly is slightly simpler javascript auto-focusing. If you want to say “focus the first form element on this page”, all you have to do is focus the first label, and the browser should pass that focus onto the field (umm… maybe not Safari). Much simpler to locate the “first label” than the “first input, textarea, or select”. Since labels have the DOM htmlFor attribute, using labels to locate form elements makes most form scripting a little bit easier (if you’ve labeled everything, that is).

blog comments powered by Disqus