Crawford Design

Logo

Forms

Forms Components

Forms consist of a number of possible input or interaction elements, including the following:

Several of these can be collected in a form element along with other content, including images and text. Usually, form elements contain at least one submit button (button or input type="submit").

These form elements fall into two subsets: those where the text prompting information is included in the control (the button) and those where the text prompting information is usually outside the control (text-input controls, radio buttons, check boxes, and select menus).

Buttons

Nongraphical Buttons

The key to accessible nongraphical buttons (input elements of type button, submit, and reset) is the value attribute. The text of the value attribute is what appears visually and is what a screen reader will speak.

input tabindex="1" type="submit" name="search" value="Search"

Button that Includes an Image

The button element permits a push button to contain images and formatted text. In the example below the word New is an image that contains the alt-text New. A screen reader reads both the alt-text and the button text (New Buy it Now). View the page source to see the markup.

Input Button with an Image

It is essential that image buttons include alt-text as well.

input tabindex="1" type="image" src="/web-accessibility/img/search_button.gif" alt="Search"

Labels

Text-input Fields and Text Areas

A text prompt is required for any text-input field or text area. The following text-input field and textarea have correctly placed text prompts. Full name is placed before the text-input field and Please enter your comments is placed before the textarea.

:

:

A programmatic connection should be made between the text prompts and input controls. The text prompt must be wrapped in a label element containing the for attribute. The for attribute name must be the same as the id name that should be in the input control. id names must be unique and only used once. (view source for complete markup)

Fieldset and Legend

Below is a more complex form with the correct placement of prompting text. The form uses the fieldset and legend elements to separate different sets of controls. Credit Card is the legend for the fieldset containing types of credit cards. In the layout below, screen readers will read the legend before each control in the fieldset element. The credit card radio buttons would sound like this: "Credit card, American Express, radio button not pressed." Please view the page source to see the code.


Payment Details
Credit Card





Avoid Forms in Tables

The form below has controls in the table cells, and the headings provide the prompting information for someone who can see the form.

Taxpayer Spouse
W2 Gross
Dividends

There are compounded serious problems for screen readers when the form controls are in the table cells. First, the same prompting text applies to more than one input field (each heading applies to two fields in its row or column) and because of the uniqueness of ids, multiple input fields cannot be tied to the same label. Second, prompting information is coming from two places (row and column headers for each cell), which is not handled well by assistive technology.

Also, when a screen reader user decides to interact with a form, a forms mode is used for form navigation. When in forms mode, screen readers cannot find any text prompting for the input fields. Bottom line, do not put forms inside tables.

More is Not Better

The form below provides too much information.

Contact Info

Business Info

Mandatory Fields

Mandatory Form Fields

When it comes to indicating mandatory or optional form fields, developers should follow three simple rules:

A common mistake for developers is to highlight all mandatory or optional fields using color alone. Screen readers can't speak that color to indicate fields are required. That information must be relayed to a visitor as text.

When all fields are mandatory or optional, it is acceptable to indicate this above the form, rather than stating beside each and every form control. If there are more optional fields than mandatory fields label only the mandatory fields and vice-versa. Do not indicate both optional and mandatory fields.

Specify above a form that the asterisk symbol indicates all required or optional fields.

Form Validation

Since not all user agents are capable of executing scripts, make sure that form validation is performed on the server, and then use progressive enhancement techniques to replicate the server-side validation with client-side scripting. Using this technique, visitors to your Web site who have a script-capable user agent will benefit from the speed of the form being validated; and for those who do not, the form is validated on the server.

Please refer to the W3C for example of form validation: Using functions of the Document Object Model (DOM) to add content to a page (Scripting)

Errors

For Web pages that require the user to submit information, at least one of the following should be used:

Make sure to clearly indicate errors for those who are color blind or are visually impaired.

Full Name Required

CAPTCHA

When using non-text content to confirm that content is being accessed by a person rather than a computer, text alternatives that identify and describe the purpose of the non-text should be provided. Alternative forms of CAPTCHA using output modes for different types of sensory perception should be used to accommodate different disabilities.

CAPTCHA Examples

Adding the Title Attribute

In the example below there is no text prompting by the label element for the search field. The search button explains what to do, but that appears after the edit field so it doesn't indicate the purpose of the field to non-visual browsers.


Be sure to add a title to the input field if it does not have the proper text prompting. Screen readers will read that title. The title does not show up on visual browsers.

input title="search" name="search"

Prompting Information by Position

Often, the visual information is given purely in terms of physical position. This is typically found in input fields for U.S. extended ZIP codes (plus 4), phone numbers in three parts, or Social Security numbers in three parts.

Below three fields are given for the Phone Number. What should go in the second and third positions is implied by their relationship to the first field. When a screen reader user lands on the first field, there is no information about the existence of the second and third fields.

The title attribute can be used to name the three fields: area code, exchange and number. But not many people know exactly what those terms mean. A single edit field should be used for phone numbers, fax numbers, pager numbers and Social Security Numbers as seen below.

Forms for People who are Deaf

Often when filling out a form a phone number is required. Requesting only a phone number is limiting to deaf people who use a telecommunication device for the deaf (TDD) also referred to as a teletypewriter (TTY). Add information specifying the desired form of communication in a typical Web form.

Information

















References

Top