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.
- 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.
- 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.
- 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.)
- How to Create Accessible Forms. For more complex forms, additional accessibility-related tags like <legend> and <fieldset> may be required. This tutorial shows you what they are and how to use them.
- Forms in HTML Documents: The LABEL element.