Skip header information, go directly to content

mwas standard Standard 14 -- Forms.
When electronic forms are designed to be completed on-line, the form 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.

Examples:
14.1 -- Form controls have text labels adjacent to them and keyboard access to control functionality.
14.2 -- Form elements have explicitly associated labels in the markup (i.e. the id and for, HTML elements).
14.3 -- Dynamic HTML scripting of the form does not interfere with assistive technologies.

Forms -- Dos and Don'ts

Do Don't

Include a label for each form element.

Make long labels with detailed instructions.

Why: Well-meaning designers often error on the other side of accessibility: adding too much information. Be aware that users with disabilities want to use the web in the same way as other users: they want to access information and perform necessary tasks quickly and easily. Adding verbose directions only adds to the clutter of a site. If the directions are important, put them in the main body of the form, where everyone can see them and benefit from them.

How: Create a label that describes the function of the element or the required information and is as short as possible.

Good label: <label for="textbox1">First Name:</label>

Too much information label: <label for="textbox1">Begin this form by entering your First Name:</label>

Do Don't

Place label as close to the form element as possible.

Separate labels and elements with dividers or by putting them in separate cells.

Why: Older versions of assistive technology software may still be unable to associate form controls with their labels requiring users to first read the label, then find the form control.

How: Place labels immediately adjacent to form elements. If you use tables to layout the form, put both the form label and element in the same cell.

Do Don't

Explicitly associate form labels with form elements.

Put label information next to or near the form element without connecting them using code.

Why: Form elements without explicitly associated labels will be read as "blank." Finding out which information belongs in which "blank" box is difficult, at best.

How: Use the "for" attribute in the label and the "id" attribute in the element.

Example HTML code: <label for="textbox1">First Name:</label><INPUT type="text" id="textbox1">

Do Don't

Create a logical tab order for navigating the form.

Assume users will "click" in the boxes and form elements they want to change.

Why: Users of assistive technology frequently fill-out forms out-of-order (that is, not top-down, left-to-right). Specifying a tab order helps insure that all form elements can be accessed with a keyboard and that keyboard users can navigate the form in a logical way.

How: Use the "tabindex" attribute in the element. You must specify a tabindex for each element in your form.

Example HTML code: <INPUT type="text" tabindex="1">.

Do Don't

Assign access keys for form elements, particularly buttons, to insure form is accessible to keyboard users.

Use elements that require a mouse to activate.

Why: JavaScript events, such as the "OnClick" don't always work for keyboard users. Access keys establish keyboard shortcuts for frequently used or important functions of the form or page.

How: Use the "accesskey" attribute in the element.

Example HTML code: <INPUT tabindex="2" type="submit" name="submit" accesskey="S">

Get more help with forms, visit WebAIM's "Creating Accessible Forms."

previousPrevious Nextnext

Top of Page || Return to Index
View/print in PDF format. (Acrobat Reader required.)
Ohio State University