Skip to main content

30 steps to a more accessible website

Step 28: Labeling form elements

Has it ever bothered you that web forms are so hard to use? For instance, in regular GUI applications, you can click anywhere on a checkbox label to check or uncheck the box, but in web-based applications, you can only click on the little checkbox square itself. This is annoying but not fatal. But for blind users, the situation is even worse. Even simple forms, like comment posting forms, can be difficult to use if you can't see them all at once. (We noted a similar problem with tables; a weblog calendar is easy to use if you can see it all at once, but difficult if you can only see it one day at a time.)

There are HTML tags which can help make forms easier to use. I'll talk about one, the <label> tag; you can read about the others in the "Further reading" section.

The <label> tag allows you to associate a form label with any kind of form input element: text box, multi-line text area, checkbox, radio button, whatever. This allows screen readers to intelligently announce what a particular input element is, by reading the label. Furthermore, if you use a <label> tag to associate a checkbox ( <input type="checkbox"> ) with the text next to it, your web-based form will work like a GUI application: clicking anywhere on the text label will toggle the checkbox.

Who benefits?

  1. Jackie benefits. When Jackie tabs through a form, JAWS announces the name of each element (by its name property), which may or may not be intelligible. But if the form element is associated with a label, JAWS will read the label text instead. "Text: name." ( TAB ) "Text: email address." ( TAB ) "Text: URL." (TAB) "Text area: comments." And so forth.
  2. Lillian benefits. Once form elements are associated with labels, Lillian can click anywhere on the text next to a checkbox, and it will toggle the checkbox. This gives a much wider margin of error for toggling the checkbox with a mouse, and with her limited vision, the wider the better.
  3. Bill should benefit, but he doesn't yet. He navigates mostly with the keyboard, which mostly means the TAB key. When he tabs to a checkbox in a form, Mozilla should set a focus rectangle around the entire label, but it doesn't; it just puts a focus rectangle around the checkbox itself. (Internet Explorer gets this right, though. Even Netscape 4 gets this right. Bad Mozilla.)

Further reading

« Step 27: Using real headers | Contents| Step 29: Making everything searchable »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1