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.
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..."
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:
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)