When electronic forms are designed to be completed on-line, the form should allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

All form controls must have text labels adjacent to them.

Form controls, or form objects, are special elements by which users interact with forms. Examples include buttons, checkboxes, menus, and text inputs.

Until user agents support explicit associations between labels and form controls for all form controls with implicitly associated labels, ensure that the label is properly positioned. The label must immediately precede its control on the same line (allowing more than one control/label per line) or be in the line preceding the control (with only one label and one control per line).

Form elements should have labels associated with them in the markup.

Whenever you use a form control / object, use the <LABEL> tag to implicitly associate a label with the control. You should also use the “id”and “for” HTML attributes to explicitly associate labels with form controls:

                <LABEL for="firstname">First Name:
		<INPUT type="text" id="firstname">
                </LABEL>

The preceding example wraps the <LABEL> tag around the <INPUT> tag, so the inclusion of the explicit association provided by the "for" and "id" attributes may not be necessary. In fact, Dreamweaver's "Input Tag Accessibility Attributes" dialog box makes you choose between these two methods. You can activate this dialog box by selecting Edit>Preferences>Accessibility and choosing the "Form Elements" checkbox. The following dialog box will then appear whenever you insert a form object:

For reasons stated earlier, the radio buttons labeled "Style: No Label Tag" and "Position: After Form Item" should never or rarely be selected. The "Access Key" text field assigns a value to the "accesskey" attribute, which enables the user to directly access the form control. The "Tab Index" text field assigns a value to the "tabindex" attribute, which determines the control's position in the tab order. Since many users prefer to tab through forms rather than using a mouse, ensuring a logical tab order is important.

It is also a good idea to provide a default value for each form control using the "value" attribute:

<LABEL accesskey="n">First Name: 
<INPUT type="text"value="firstname" tabindex="1">
</LABEL>

When form controls can be grouped into logical units, use the <FIELDSET> element and label those units with the <LEGEND> element:

                  <FORM action="http://example.com/adduser" method="post">
		  <FIELDSET>
		  <LEGEND>Personal information</LEGEND>
		  <LABEL for="firstname">First name: </LABEL>
		  <INPUT type="text"
		  id="firstname" tabindex="1">
		  <LABEL for="lastname">Last name: </LABEL>
		  <INPUT type="text"id="lastname" tabindex="2">
		  ...more personal information...
		  </FIELDSET>
		  <FIELDSET>
		  <LEGEND>Medical History</LEGEND>
		  ...medical history information...
		  </FIELDSET>
		  </FORM>

Make sure that the Dynamic HTML scripting of the form does not interfere with assistive technologies.

Test out your form with Bobby, at http://bobby.watchfire.com, or with WAVE, at http://wave.webaim.org, especially if you use dynamic HTML. If the dynamic HTML interferes with assistive technology, such as screen readers, provide a form alternative that does not use the dynamic HTML. You should also provide alternative means of submitting form information, such as a phone number and/or a mail or email address.

For further information, see the World Wide Web Consortium’s Guidelines for Forms.