Forms consist of a number of possible input or interaction elements, including the following:
passwordand with no
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 (
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).
The key to accessible nongraphical buttons (
input elements of
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"
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.
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"
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
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)
Below is a more complex form with the correct placement of prompting text. The form uses the
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.
The form below has controls in the table cells, and the headings provide the prompting information for someone who can see the form.
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.
The form below provides too much information.
fieldsetrepeats the on-screen prompt. The
legendtag should be used to enclose groups of controls with a common purpose, not just one control.
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.
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)
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
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.
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 does not show up on visual browsers.
input title="search" name="search"
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.
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.
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.