Difference between revisions of "Web Accessibility:Forms"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
{{Web toc:Access}} | {{Web toc:Access}} | ||
| + | On a web page forms are interactive elements that require user response and interaction. Form input fields range from text entry fields, selection lists, radio buttons, checkboxes and action buttons. They are used for multiple purposes from authenticating users, collecting and processing user information, conducting transactions, as input for search engines, to creating menus, surveys, polls and quizzes and other interactive tools. | ||
| + | |||
* Place labels for text controls adjacent and left of the form control | * 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 | * Place the labels for radio buttons and check box to the right of the form control | ||
Revision as of 11:34, 19 December 2006
On a web page forms are interactive elements that require user response and interaction. Form input fields range from text entry fields, selection lists, radio buttons, checkboxes and action buttons. They are used for multiple purposes from authenticating users, collecting and processing user information, conducting transactions, as input for search engines, to creating menus, surveys, polls and quizzes and other interactive tools.
- 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
Resources
[1] IBM Web Guidelines- Forms
[2] WEBAIM- Creating Accessible Forms
[3] Jim Thatcher- Accessible Forms
[4] Web Standards- Forms
[5] Accessify.com- Acessibile Form Builder
[6] Web Semantics- Accessible Forms