Forms

Forms can be an important part of any web site. Forms allow for interaction between the creators of a site and people visiting or using the web site in the shape of information collection.

In order to ensure the widest possible usage of forms on your web site, the forms must be created with accessibility and usability in mind. There are a number of factors that contribute to the accessibility and usability of forms, including layout, labeling and grouping.

Form layout

Standard: All important information related to a form, such as form instructions, must be presented before the form itself. The submit button must be the last form element contained within a form.

Screen readers and other adaptive technology access forms and other HTML content in a linear order. Once a screen reader encounters a submit button, it expects that the form should be submitted. In cases where optional fields, such as radio buttons for changing search criteria, are presented after the submit button, the screen-reader user may not be aware that the options even exist.

Similarly, instructions for a form must be presented before the form. This includes statements about how required fields are denoted or information that the person should be aware of before submitting the form. For example, "This quiz will take approximately 20 minutes" or "In order to complete this form you will require your staff number..."

Labeling form fields

Standard: All form fields must be associated with their labels using the < label> HTML tag. If a form cannot be labeled, it must include a title that explains in brief what the form field is.

Form fields always have a text-based label indicating what information should be entered into the form field, or what a radio button/check box represents. These labels need to be associated with the actual form field for greatest accessibility. This extra information provides two advantages:

1. It explicitly associates the field with the label (or provides the equivalent information through the title). This means that when a person is filling out the form using a screen reader, the screen reader will tell the person what the field represents. Without this explicit association, the screen reader software must "guess."
2. The label text becomes "clickable". When you click on the label, the form field it is associated with receives the focus. In the cases of radio buttons and check boxes, this action will select or deselect the form control. This provides a larger "target" area for clicking, making the form more usable to everyone and especially more accessible to those using voice recognition software or people who have a motor impairment.

For example for a Text Input form control, used to collect an email address, your code would look something like:

<label for="email">email address:</label> <input type="text" id="email" size="10" maxlength="30" />

(where the "for" attribute corresponds to the "id" attribute)