Forms, Web Accessibility, The University of Arizona

Requirements:

Fill-in forms make your web pages interactive by collecting information from your users. Common uses of fill-in forms are surveys, on-line order forms, feedback, comment forms and online tests. Forms can present great difficulty for a non-visual user, particularly forms which use checkboxes, radio buttons, or options. Online forms must be accessible to everyone.

Requirements:

Provide contact information so that users can contact you with problems or request the form in an alternative format.
Provide coding to associate text labels with their form controls.
If you cant make a form accessible, you must also include an alternate form which can be downloaded, scanned, or printed if necessary, and submitted.

Making Forms Accessible:

Every form page must include contact information so that users can contact you with questions about the form or to report problems to completing the form.
Associate form elements with their text labels by adding id and header tags. Adding the "for" attribute in the <label> element links the label with a particular control.

Sample form (for demonstration only)

Name:

What is your expertise?

Select your department:

Indicate your class status:
Undergraduate student
Graduate student

Check the type of audience you would work with. Check as many as you wish:
Visiting high school students
Career day programs in K-12
Adult groups in community

Code for example above:


<form action="/cgi-bin/xxx.cgi" method="post">
<h3>Sample form:</h3>
<p><label for="complete_name">Name:</label>

<input type="text" size="25" name="name" id="complete_name"></p>
<p><label for="expertise_area">What is your expertise?</label><br>
<textarea name="expertise" cols="25" rows="3" id="expertise_area" wrap="physical"> 

</textarea></p>
<p><label for="home_department">Select a department:</label>
<select name="dept" size="1" id="home_department">
<option value="Best Dept">Best Department</option>
<option value="Better Dept">Better Department</option>
<option value="Oldest Dept">Oldest Department</option>
</select>

</p>
<p>Indicate your class status: <br />

<label for="undergraduate_status">Undergraduate student</label> 

<input type="radio" name="status" value="undergraduate" id="undergraduate_status">
<label for="graduate_status">Graduate student</label> 
<input type="radio" name="status"  value="graduate" id="graduate_status> 
</p>

<p>Check the type of audience you would work with. Check as many as you wish:<br>

<label for="highschool_talks">Visiting high school students</label>
<input type="Checkbox" name="audience"  value="highschools" id="highschool_talks"><br>

<label for="career_talks">Career day programs in K-12</label>
<input type="Checkbox" name="audience"  value="careerdays" id="career_talks"><br>

<label for="adult_talks">Adult groups in community</label>
<input type="Checkbox" name="audience" value="adults" id="adult_talks"> 
</p>

<input type="submit" value="Send data"> 
<input type="reset" value="Clear Form">
</form>