Forms
Interactivity and the use of forms
When using forms on your web page you should use the accessible tags
available to help the user fill in the forms. Each field title should
have a label tag associating each title with the appropriate
field. Also the titles should always preceed the fields as screen readers
read from
top to bottom and left to right.
When using radio buttons or check boxes,
the fieldset and legend tags should be used
to label and group responses. When using drop-down lists be sure the
user can scroll through the
options using either the mouse or the cursor keys without a selection
being made.
Instead
of having it automatically accept the selection, add a submit button.
Example
Text Fields
Here is an example of how the order of text fields and labels can affect the accessibility of a form.
Incorrect order:
When the text field titles are placed after the fields, it is often unclear which field corresponds to which title.
Correct order:
Titles placed before the fields make this form more accessible.
Drop-down Lists
In this example, the menu links to the item once it is selected.
Incorrect Menu (no Button)
Since using the arrow keys is equivalent to selecting an item, keyboard users may only be able to select the first option.
Correct Menu (with a Button)
Because the following drop-down menu only executes after the button is pressed, users can scroll through the items until they find the right one.
Links
Creating Accessible
Forms
(http://www.webaim.org/techniques/forms)
