Home Accessibility Forms Label Your Form Elements   |   Search MS Office A-Z   |   Search Web Pages/ Design A-Z

Label Your Form Elements

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

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.

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!"

Always place the LABEL element immediately before or after the form control related to it.