|
Accessibilty Tip:
LABEL Your Form Elements
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Most people can quickly glance at a form and understand how and where to enter information like name, address, and credit card number. But how easy is it to understand a form when you can only hear, not see it? Fortunately, there's a handy HTML tag you can add to your form elements to make forms easier for visitors with disabilities.
Many Forms Can Be Seen But Not Heard
The adage that "children should be seen and not heard" certainly doesn't apply to online forms! Visitors using assistive technologies like screen readers rely on you to create forms that can be heard as well as seen.
In our October 2002 Accessibility Tip: Designing Accessible Forms, we discussed how difficult it can be for a screen reader to verbally render a form designed using a table structure.
Most screen readers and speech-enabled browsers read the cells in the order they're included in the HTML code. That means a form designed without accessibility in mind may sound something like this when the screen reader interprets it:
- First name
- Last name
- Phone number
- Input box for first name
- Input box for last name
- Input box for phone number
|
But proper table design isn't the only consideration. Even a careful table and form layout can be confusing for some users if the form controls aren't clearly labeled.
Add The LABEL Element
Labeling a form control means more than just making sure the text that appears on the Web page is clear. It also means that you've used the LABEL element to clearly mark and describe what type of information you want the visitor to enter into each form control.
A little background information: A "form control" is a fancy term for a text box, checkbox, radio button, or any element in a form that allows the user to enter information or submit the form.
The LABEL element is an "explicit label" for the form control. By explicit, we mean that you're specifically providing information about each form element. Each form control should have its own LABEL. Add the FOR attribute to tie the LABEL to the form control's ID attribute.
For example, here's the code for a simple form using the LABEL element:
<form method="post" action="../cgi-bin/FormMail.pl" name="emailForm">
<label for="em_add">Email Address</label>
<input type="text" name="email" id="em_add">
<br>
<label for="comment_here">Send us your Comments!</label> <br>
<textarea name="comments" id="comment_here" cols="20" rows="5">
</textarea>
<br>
<input type="submit" value="Submit">
</form>
Note that we didn't add a LABEL attribute for the SUBMIT button. That's because screen readers read the text that's on the button. That's a handy feature, but does mean that you need to clearly define the button's use. A button with text like "Submit" or "Send" is fine. Try to avoid more oblique values like "Tell Us!" or "Done!"
You can also add the ACCESSKEY attribute to your LABEL element and make keyboard navigation easier for visitors.
Other Considerations With LABEL
Always place the LABEL element immediately before or after the form control related to it. Although it's not a good idea, you could create a LABEL like this for a table inside a form:
<form ... form attributes here>
<table>
<tr>
<td><label for="em_add">Enter Your Email Address</td>
<td>Need an email address? The University offers them free to all students!</td>
</tr>
<tr>
<td><input type="text" name="email" id="em_add"></td>
<td> </td>
</label>
</tr>
</table>
</form>
First, you have nesting problems and HTML Toolbox would probably alert you that your tags aren't closed properly. But even more important, you've created an "implicit" LABEL instead of an explicit one.
The screen reader may not read the label correctly because of the coding error. Remember that a screen reader is basically a text browser - just like a search engine spider - and coding errors cause problems. Also, you've separated the LABEL from its form control with an extra comment on how to get a free email address.
Although it would be absolutely clear to someone who could see the form, someone listening to it would have a harder time understanding what's expected.
Good Forms Help You And Your Visitors
The LABEL element does two things: it makes forms more understandable and more usable for visitors with disabilities.
- Visual Disabilities: Without a LABEL element, JAWS (one of the most widely-used screen readers) reads the text from the NAME attribute in the form control. That may be something like "email" or something more obscure like "e_address."
But when the form control contains a LABEL element, JAWS reads the text inside that instead. A visitor hears: "Enter your email address."
- Motor Disabilities: Some people have medical conditions like Multiple Sclerosis that make it hard to use a mouse with pinpoint control. LABEL helps them because they can click anywhere inside the LABEL's text to select the form control.
That makes it much easier for visitors to select small form controls like checkboxes and radio buttons. They don't have to exactly position the mouse inside the tiny box to select it. Most browsers support this, but it doesn't break the form in those that haven't added this important accessibility feature.
|
All customers want Web applications to be fast, easy to use, and understandable. Visitors with disabilities are a large loyal market. Remember: they don't just expect ease of use, they require it in order to buy from you! When they have a good experience, you gain a repeat customer who will likely refer even more visitors your way.
|
