Usability tip #2: Use the label tag!
Posted by #
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.
100% agree. Also with some display:block magic you can allow the clickable area to span the width of the container which can be quite cool. Obviously that’s harder to communicate to the user though.
Both of those sites are made by devs being on Macs using Safari. Wonder if there is a correlation between Safaris lacking support for label fields and the lack of label fields.
Jakob: Yeah, the same crossed my mind :-)
I hate it when I’m filling out some form and I try to click on the label only to discover it’s not a label. This happens all the time on official state-run sites, that all seem to be made by the same crappy consulting firm here in Norway.
Another thing with labels is you can add the :hover metaclass in CSS and get visual feedback. Just like in GTK :)
Good call… that’s definitely something we could improve. We’re working on wrapping up our latest Blinksale iteration, and hopefully its a bit more accessible than the current.
And yes, we are Mac devs… using Safari.
Josh, thanks for taking action so quickly. One note, though. It’s not enough to just put label tags around the text, you also need to specify for which form element the label refers to.
So, instead of <label>Email</label> you should have <label for=”person_email”>Email</label> etc.
I’m a Mac developer, too, just using Camino mostly nowadays because of its speed and the type-ahead search functionality.
Anyway, I’m otherwise a great fan of your products. Keep up the good work!