How-Tos and Demos
Accessible Forms
Example: Labeling Input Fields
This example shows a text-input field with a text label immediately to the left of the field. The label may also be positioned directly above the input field-- if it is labeled correctly!
How to do it
Code example for labeling input fields 
Rationale
The key to accessible forms is to ensure that people using screen readers and other assistive technology have access to all the information necessary to complete electronic forms online. The <label> element and its for attribute were added to HTML specifically to support accessible labeling of form controls, including input fields like this one.
The <label> element's for attribute has to match the <input> element's id attribute. This makes it possible for screen readers to identify the onscreen text as a label for the <input> element. Use of the <label> element is especially important when tables are used to lay out the form, as in the example above.
When form fields are not labeled explicitly, screen readers will skip over the text on your form when users try to enter data. For example, a screen reader will simply say, "Edit" or "Edit box," forcing the user to guess what information is being requested. Screen readers will not speak any text on a form that is not placed inside a tag such as a link, label, button, or legend.
Another advantage of using the <label> tag is that you can have more control over how field labels appear, using style sheets.
How it sounds with the JAWS screen reader
Listen to JAWS reading this form
JAWS transcript
[Please enter your name as it appears on your credit card: Edit.]