Usability Tip #2: Use the Label Tag!

Many otherwise great web sites/applications, like Basecamp and IconBuffet, seem to share one very annoying shortcoming: their forms don’t use label elements.

Even if you think accessibility is for documents (which it isn’t), please use labels in your forms. They are not just for blind people.

The big thing for me in using labels is that they effectively make the clickable area of the form element a lot bigger. Which one would you prefer pushing? The male (without label) or the female (with label)?


(Of course if you use Safari you don’t care because Safari doesn’t support the label element.)

I think using real form labels is a huge usability enhancement in addition to helping accessibility.

For gawd’s sake, using the Rails’ form helpers to construct the form automatically uses labels, so it shouldn’t be too hard for two of the more prominent Rails showcases to use it.