Please use label tags!
June 08 2007 by
Adam
Please, please, PLEASE use label tags! Accessibility has been on a lot of people's minds for a while now, and I'm surprised to see the lack of zeal for the HTML label tag.
Recently, people have wised up and made entire blocks clickable, not just the text within them, sometimes doubling, tripling, (or more!) the size of the rectangle representing the link. Generally you recognize one of these menus when you hover over the menu item's row and it or the link changes color, and your cursor changes to a hand. This is a great step forward in usability, and it pains me to see the forms equivalent being neglected like the red-headed step child.
Take for example, your average navigation menu. Mine will do: over to the right there. —>
When you hover your mouse over a menu item's row (list item), the row changes background color, the link changes color, and the mouse cursor changes to the "hand" to indicate that you are over a link.
Think about it: A check box is only about 15 pixels tall by 15 pixels wide. That's a very small rectangle and not only requires extra precision on the part of your average user, but may prove to be difficult for someone with poor eyesight or arthritis. A radio button is even smaller. In most cases, your checkbox is going to have some text next to it that describes what checking it accomplishes. Wrapping that text in a label tag will only take you a few more seconds, and exponentially grows the clickable rectangle for that form control.
<p>Try clicking on the text labels:</p>
<form>
<input id="male" name="sex" type="radio" />
<label for="male">Male</label><br />
<input id="female" name="sex" type="radio" />
<label for="female">Female</label>
</form>
Try clicking on the text labels:
Add some CSS to change the cursor, and you're in good shape:
label { cursor: pointer; }
Try clicking on the text labels:
Your users and I thank you!
Posted in Best Practices | HTML/CSS |