Design Principles
Ensure all information related to forms (field elements, directions and cues) are accessible to assistive technology
§ 508 1944.22: (n) Forms 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.
On a web page forms are interactive elements that require user response and interaction. They are used for multiple purposes from authenticating users, collecting and processing user information, conducting transactions, input field for search engines, menu selections, surveys, polls and quizzes and other interactive tools.
Forms include input fields for text entries, selection lists, radio buttons, checkboxes and action buttons.
A forms consists of:
- Container <form> element which contains the input fields or form control and the "action" / scripts to process the information
- Form control <input type=""> can be set to "text", "passwords", "radio buttons", "checkboxes ", "hidden" and "action button"
- Form control <textarea> used to enter large amounts of text
- Form control<select > provides a list of options for selection by the user
Example Code showing form controls
<form action="http://ncsu.edu/.../cgibin/adduser" method="post">
<input type="text" id="name" name="per_name">
<input type="password" id="pwd" name="login">
<input type="hidden" id="search" value="inurl:www.ncsu.edu/it/access/" >
<input type="radio" id="m" name="sex" value="Male">
<input type="radio" id="f" name="sex" value="Female">
< textarea id="comments" name="usercomment" rows=10 cols=15 />
<select id ="paytype " name="payment" size="1">
<option selected value="">Cash</option>
<option value="cc">Credit Card</option>
<option value="chk">Check</option>
</select>
<input type="submit" value="Submit form ">
<input type="reset" value="Reset Form>
</form>
Since forms are user input fields they have labels and other information associated with them. While some screen readers can interpret text adjacent to the field as its label, the recommended design is to explicitly associate the label with the field and programmatically associate all other information and cues with the input field. A label can only be associated with one form control, while a form element can have multiple labels associated with it.
Examples for creating accessible Form controls
Design criteria for creating accessible forms :
- Place labels for text controls adjacent and left of the form control
- Place the labels for radio buttons and check box to the right of the form control
- Do not use structural elements like table cells to separate the label from the form control.
- Explicitly associate the label with the form control
- Set each form control with a unique id value
- Use the <Label for="form_control_id_value" > to explicitly associated the label with the form control.
- Avoid using images as labels for form controls, if they are used, be sure to use them within the <label> element and include the alt attribute
- Place a text prompt in the text entry and selection controls
- Use title attribute to increase functionality by giving additional supplemental information for the form control
- Organize form controls into related groups. Use <fieldset> element to group form controls and the <legend> element to label the group
- If needed use <tabindex> to establish the tab order of the entries
- Use CSS to control the visual appearance of the form
Examples of Accessible Forms
