Label your form controls properly

In Label - the secret element, Robert Nyman points out how annoying it can be to use a site that does not make proper use of the label element to associate form controls with their labels.

I second that. Placing the cursor on a tiny radio button or checkbox can be tricky. However, if the corresponding text has been associated with the radio button or checkbox you can also click the text. Much easier, wouldn't you say? Unfortunately that is one area where my favourite browser, Safari, falls short of the competition.

Oh, how I would love to have clickable form labels in Safari. Pretty please, give us clickable form labels soon!

On the subject of clickable labels: in the comments to Robert's post the idea of using CSS to indicate that the label is clickable by turning the cursor into a pointer is discussed. While the intention is a good one, I'm not so sure I like the idea: it is very confusing in browsers like Safari and OmniWeb that don't support clickable labels. The cursor changes to a pointer, but nothing happens when you click.

I think that in most cases, styling and behaviour of forms are best left to the browser and operating system defaults.

Posted on December 21, 2005 in Quicklinks, Accessibility, Usability