Home > View Post

Fitts Labels and Accessibility

Fitts' Law is a popular topic at the moment. These posts reminded of a t-shirt I won for a tip published in this sitepoint.com newsletter, back in October 2001 about Fitts' Law.

It talked about the introduction of label tags to the HTML 4.0 (remember that!) and how you should add a <label> tag for all your form elements, like so:

<input type="checkbox" value="true" name="onOrOff" id="checkbox1" />
<label for="checkbox1">On or Off?</label>

Why? Well, now the clickable area of the tiny checkbox has increased to include the "On or Off" label. This is the Fitts part of this post so in case you've not popped off to read those other posts I'll repeat his law for you:

"The time to acquire a target is a function of the distance to and size of the target"

So if you make the target (the clickable area) larger you make it easier to click the control quickly.

Furthermore, and arguably more importantly, screen readers now know which piece of text on the page relates to which controls, increasing the accessibility of your form.

Labels in ASP.NET

In ASP.NET the checkbox control includes a label element which is rendered for you, just like the example above. However, the HTML label tag can be used with other controls, not just checkboxes.

We're all familiar with the Label control in ASP.NET and you're probably aware that it renders as a <span> tag by default:

<asp:Label ID="_lblName" runat="server" Text="Name"/>
<asp:TextBox ID="_txtName" runat="server"/>

renders as

<span id="_lblName">Name</span>
<input name="_txtName" type="text" id="_txtName" />

The AssociatedControlID property

Here's my tip for 2006 (t-shirt anyone?). the label control contains an AssociatedControlID where you can specify the control that the label belongs to (you even get a dropdown in the designer).

<label for="_txtName" id="_lblName">Label</label>
<input name="_txtName" type="text" id="_txtName" />

Now your code will render with a label control and tick one of those accessibility boxes we should all be working harder to fill. What's more, even the textbox will have a larger clickable area!

Note: If we'd have used the Tools > Check Accessibility function in Visual Studio we'd have been warned that our controls should all have an associated label. But how many of us are using that properly? That'll teach us!


Josh Post By Josh Twist
12:43 AM
23 Aug 2006

» Next Post: My Favourite Tool. The Google Toolbar
« Previous Post: Overlooking Smart Clients

Comments are closed for this post.

Posted by Dusty @ 23 Aug 2006 9:50 AM
Excellent! This also aleviates struggling with having to do it manually. For instance, manually adding a LABEL tag, and setting it's FOR attribute to the ClientID/UniqueID of the TextBox. With nested controls, the ID get's mangled, and you cannot do this easily (or elegantly).

Thanks for the tip!


Posted by Eric D. Burdo @ 30 Aug 2006 1:11 PM
Is that Check Accessibility feature only in 2005?

Posted by Josh @ 03 Sep 2006 8:32 AM
Hi Eric, sadly I think it was only introduced with 2005. Not used 2003 for a while now but don't remember it being in there.


© 2005 - 2022 Josh Twist - All Rights Reserved.