Build Accessible Online Forms

More Helpful Labels

As with most HTML tags, you can apply styles to the <label> tag using Cascading Style Sheets (CSS) quite easily. It may be enough to use a bold weighting for the label text to make it stand out from other text in the form. However, there is another trick that you can employ for the <label> to make it a more appealing for sighted users.

A <label> not only makes it easier for screen readers to identify what the input is, it also gives the sighted user a larger area to click on with their mouse. This is particularly useful when employed with checkboxes and radio buttons. No longer do you have to move your troublesome mouse to a tiny little spot on the screen to activate the control -- now the whole of the wording is clickable! And if you think about this, most software applications have done this as standard for years.

Software applications have made it easier to select checkboxes by making the whole of the associated text clickable.

Now you can make the associated text clickable in HTML forms. Incidentally, there is a law known as Fitt's Law which states that:

...and here is a great example of improving the usability (as well as the accessibility) of your form.

However, if you use a label, and sighted users don't know that the associated input text is clickable, then they won't get this advantage, right? Well, you can suggest that something's clickable for them...

label {  
font-weight:bold;  
cursor:hand;  
}

Now, when the user hovers over a label, the cursor changes to a pointer which seems to say "Ooh, ooh, click me, click me!", at which point the user discovers that the text can set the focus to that field.

Note that the use of cursor:hand may mean that your CSS file does not validate properly. You win some, you lose some -- you have to ask yourself what's more important.

Laying Out Your Form

My best advice for the overall layout of a form is to keep it clean -- leave some breathing space around inputs, and don't cram it with explanatory text. If you must provide help, do it subtly (perhaps linking to a separate help file to reduce on-screen clutter).

I always find that forms that have a clean solid background colour that differentiates itself from the document background colour works nicely. It says to me "This is the area that you need to do something with." A pastel shade, grayscale or something similar can works quite well.

Almost always, you will opt for a table to present form inputs to get everything to line up correctly. There is no problem with this, as long as you check your table in a linearized view (see the links section at the end of this tutorial). The worst thing you can do is put the text for each form input in separate cells from the inputs themselves, like so:

Screen readers will have real difficulties with this, as will text browsers such as Lynx. The advice is simple -- keep them together! If you do use a table layout like the one mentioned above, you will get this kind of problem:

This, the New York Times' registration page, works poorly when linearized. The following two tables would not have the same problems as demonstrated by the New York Times' registration page, though. In these examples, the text would appear next to the correct input field. However, if you're using the <label> tag correctly, you really should have no problems whatsoever with screen readers: