Forms

Online forms make your web pages interactive by collecting information from your users. Common uses of online forms are surveys, order forms, business transactions, feedback, comment forms, job applications, and online tests.

Completing even the most carefully designed online forms may be difficult or impossible for users with certain types of disabilities, users of some adaptive technologies, and users of some Web-enabled devices. Individuals with mobility disabilities may have difficulty accessing small form controls, such as radio buttons and check boxes.

The design, content and layout of an online form must be considered in order to ensure access for the widest possible audience. Even though some accessibility features for forms may not be obvious to all users, everyone benefits from a well-organized form.

One of the most common ways of navigating through a form is by using the tab key. Web developers must ensure that the forms on a Web site can be completed using only the keyboard. If a form control can only be activated with a mouse or other pointing device, someone who is using the page without sight, with voice input, or with only a keyboard will not be able to use the form.

Because forms typically collect data that is stored in a database, the design of a form does not need to follow a specialized layout. For example, many people believe that an online version of a form must be identical to that of a paper form. The only reason to do this is to maintain familiarity. Forcing the layout of a form into a table with complex columns and rows can make it very difficult to navigate and complete, even if all accessibility features are included.

Web developers should ensure the simplest and most linear layout of a form, and educate their clients about accessibility issues when presented with a pre-conceived layout.

REQUIRED:

When electronic forms are designed to be completed online, the form shall 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. [Section 508, Part 1194.22, Paragraph (n)]

Divide large blocks of information into more manageable groups where natural and appropriate. [W3C WCAG 1.0, Checkpoint 12.3, Priority 2]

Create a logical tab order through links, form controls, and objects. [W3C WCAG 1.0, Checkpoint 9.4, Priority 3]

The following markup and design techniques are required:

1. Explicitly associate form controls and their labels with the <LABEL> element. Use of the <LABEL> element ensures that the correct field identifier is spoken when a screen-reader user tabs to the edit field. Additionally, it provides a larger target for mouse users by positioning the cursor in the form field, or toggling the value of radio buttons and check boxes, if the text label is clicked.
   
   
2. Group related form fields using the <FIELDSET> and <LEGEND> elements. The <FIELDSET> element groups form controls that are within it, and the <LEGEND> element labels the group. Grouping form controls provides additional context information by explicitly showing that they are related in some way.
   
   
3. Radio buttons and check boxes should have an option selected using the CHECKED attribute. This provides an initial focus for these fields so that keyboard users can navigate more easily through the form.
   
   
4. When providing a <SELECT> option, add the <OPTGROUP> element to group the information, even though this feature is not yet widely supported in all browsers.
   
   
5. Use Cascading Style Sheet (CSS) references for the visual presentation and positioning of elements in your form. Ensure that forms are understandable and accessible when viewed in a linear layout.
   
   
6. Forms must follow a logical tab order. Include the TABINDEX attribute, and test to make sure that each label and field follows a sequential order when accessed using the keyboard.
   
   
7. Always provide a button to submit forms. Don't use JavaScript to automatically submit them. This can be confusing and can lead to unintended results because the user cannot scroll through the list without selecting one of the options.
   
   
8. Consider using accesskey attributes for form submit and reset buttons. This style guide reserves "x" for submit and "y" for reset.
   
   
9. Detailed instructions for using a form should come after the form; however, a link to those instructions should appear before the form. Only a short introductory paragraph should appear before the beginning of the form. If the user has already learned to use the form, having to read or scroll through lengthy instructions each time before accessing the form fields can be frustrating. Instructions must include information on how to navigate the form using a keyboard. Instructions or field help should not appear via pop-up windows, but rather within the text of the form itself.
   
   
10. A server-side script that displays feedback on another Web page is the preferred method for validating form information. If JavaScript is used, the error should appear as an alert message rather than as text that displays back onto the same page. Learn more about accessible JavaScript.
    
    
11. Provide contact information so that users can contact someone if they experience problems or to request the form in an alternative format.

EXAMPLE:

The following example demonstrates a majority of the above features:

This is the code for the above form example:

<form action="" 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">
</fieldset>

<fieldset>
<legend>Sex</legend>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" tabindex="3" checked="checked">
<label for="female">Female</label>
<input type="radio" name="sex" id="female" tabindex="4">
</fieldset>

<fieldset>
<legend>Computer Type</legend>
<input id="mac" type="radio" name="radiobutton3" value="radiobutton" tabindex="5" checked="checked">
<label for="mac">Mac </label>
<input id="pc" type="radio" name="radiobutton3" value="radiobutton" tabindex="6">
<label for="pc">PC</label>
<input id="linux" type="radio" name="radiobutton3" value="radiobutton" tabindex="7">
<label for="linux">Linux</label>
</fieldset>

<label for="favcity2">Which is your favorite city?</label>
<select id="favcity2" name="favcity2" tabindex="8">
<optgroup label="Europe">
<option value="1" selected="selected" >Amsterdam</option>
<option value="3">Interlaken</option>
<option value="4">Moscow</option>
<option value="5">Dresden</option>
</optgroup>
<optgroup label="North America">
<option value="2">New York</option>
<option value="6">Salt Lake City</option>
<option value="7">Montreal</option>
</optgroup>
<optgroup label="South America">
<option value="8">Buenos Aires</option>
<option value="9">Asuncion</option>
</optgroup>
<optgroup label="Asia">
<option value="10">Hong Kong</option>
<option value="11">Tokyo</option>
<option value="12">New Dehli</option>
</optgroup>
</select>

<input type="submit" value="Submit Form" tabindex="9" accesskey="x">
<input type="reset" value="Reset Form" tabindex="10" accesskey="y">
</form>