Why Label Form Fields?

Labelling form fields means that clicking on the label will give the form field the focus. So with radio buttons and checkboxes you can click the text to select the button just as you can in non-web applications. This however is only a side effect of labelling and is not the reason why you should be labelling ALL of your form fields other than buttons.

When a web page is displayed on a computer screen you can tell from the visual layout of the form which text is the label for which field. Not everyone views the web page in a web browser where this visual relationship is obvious though and it is for those who don't see the page this way that the labelling of the fields within the HTML itself is essential.

There are quite a few situations where the labels will make a big difference to how your form is perceived. The following are perhaps the two most obvious situations where the labels will make a difference.

Search Engines don't see the page the way people do - they see the source code written in HTML. The more information that you can provide them with so that they can properly determine how all of the content of the page is related the better chance the search engine has of figuring out what your page is about and the better chance you have of getting a higher ranked listing. While this may not be the most important thing that you can do for SEO purposes it might be the one that makes the difference when your page is compared to another page with similar content.

More importantly though is where your page is being 'displayed' somewhere other than on a computer screen. Blind people use web readers or braille devices to access the content of your web page. In neither of these cases can the blind person see the relationship between the form field and its label based on their placement in the final page. Only by actually attaching the label to the form field directly using a label tag can you tell the web reader or braille device what label belongs to which field so that the fields can be correctly identified allowing the person to fill out the form properly and not enter things into the wrong fields.

Displaying the web page in a browser is only one of the growing number of ways that people now access web pages. There are a growing number of devices that provide additional ways to access the web - many of these have very small screens or no screen at all. By providing as much information as possible on how the parts of your page are related within the HTML itself you future proof your pages so that regardless of how your pages are accessed your visitors will know what each form field is for.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow