Improve Site Performance Increase Site Traffic Monitor Site Uptime Webmaster Resources NetMechanic Home Looking For Help? Partner Programs Privacy Policy Contact Us Press Room
NetMechanic Home LOGIN | HELP | ABOUT US | PRODUCTS | SITE MAP
NetMechanic Menu
Over 52 Million Web Pages Tested!     
 
usable web page tips.
search engine optimization story search.
Search for:


Your Email:

I would like to receive my newsletter in:
HTML format
Text format


usability testing.
Volume 8 (2005)
   September
   June
   April
   March
   January

Volume 7 (2004)
   November
   September
   July
   June
   May
   April
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 6 (2003)
   December
   November (Part 2)
   November
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 5 (2002)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 4 (2001)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June (Part 2)
   June
   May (Part 2)
   May
   April (Part 2)
   April
   March (Part 2)
   March
   February (Part 2)
   February
   January (Part 2)
   January

Volume 3 (2000)
   December (Part 2)
   December
   November (Part 2)
   November
   October (Part 2)
   October
   September (Part 2)
   September
   August (Part 2)
   August
   July (Part 2)
   July
   June
   May
   April
   March
   February
   January

Volume 2 (1999)
   December
   November
   October
   September
   July
   June
   May
   April
   March
   February
   January

Volume 1 (1998)
   December
   November
   October
   September

 

Accessibilty Tip:
LABEL Your Form Elements

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

  
January 2004 (Part 2)
Vol. 7, No. 2
 • Promotion Tip
 • Design Tip
 • Accessibility Tip
  

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:

  1. First name
  2. Last name
  3. Phone number
  4. Input box for first name
  5. Input box for last name
  6. 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.



Rate This Tip:
Not Useful Useful Very Useful   
 
NetMechanic Tools
HTML Toolbox
Browser Photo
Server Check
Search Engine Starter
Search Engine Tools
GIFBot
Newsletter
HTML Tutorial and Tips
Search Engine Tutorial
Accessibility Information
Browser Problem Tutorial

Company Info
Products
About Us
Contact
Advertise
Link To Us
Jobs
Privacy Policy
Partner Programs
Press Room
RSS Feed
Support
 



Powered by Overture!

 
     
 
   
 
     


Keynote Home
Copyright © 1996-2010,
Keynote NetMechanic
All rights reserved.