Forms

Non-visual users ofter find online forms, particularly those that use checkboxes, radio buttons, or options, difficult to use. The tips below will help you make forms accessible. However, even on accessbile forms, it's important to provide a contact for those who have difficulty using the forms. If you are unable to make online forms accessible, include an alternate form on the page (that can be downloaded, scanned or printed) and an alternate way to submit it.

Associate form elements with labels

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:

Best Department Good Department New 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">

<label for="name">Name: </label>    <input id="name" size="25" name="name" />

<label for="expertise">What is your expertise? </label>

<textarea id="expertise" name="Expertise" rows="3" cols="25"> </textarea>

<label for="department">Select your department:</label>

<select id="department" size="1" name="dept">

<option value="Best Dept" selected="selected">Best Department</option>

<option value="Good Dept">Good Department</option>

<option value="New Dept">New Department</option>

</select>

Indicate your class status:

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

<input id="undergraduate_status" type="radio" value="undergraduate" name="status" />

<label for="graduate_status">Graduate student</label>

<input id="graduate_status" type="radio" value="graduate" name="status" />

Check the type of audience you would work with. Check as many as you wish:

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

<label for="career_talks">Career day programs in K-12</label>

<input id="career_talks" type="checkbox" value="careerdays" name="audience" />

<label for="adult_talks">Adult groups in community</label>

<input id="adult_talks" type="checkbox" value="adults" name="audience" />

<input type="submit" value="Send data" />

<input type="reset" value="Clear Form" />

</form>

"D-links" and alt tags are useful in describing charts and graphs.