Forms

• Make forms accessible to assistive technology.

Forms can be an accessibility issue for someone who is blind if the form elements cannot be identified when they try to complete the form. There are two big accessibility issues with completing forms: understanding which text label describes each form field and understanding which fields are required to complete the form. When using a screen reader, you need to be able to tab through a form and understand the purpose of each form element.

This page describes techniques for programmatically associating text labels with form fields and techniques for indicating required fields in a way that can be understood by assistive technology.

For more information on accessible forms, see Accessible Forms (link resides outside of ibm.com) from Jim Thatcher and Creating Accessible Forms (link resides outside of ibm.com) from WebAIM.

Back to top

The following techniques and examples support Checkpoint 7 from the IBM Web Accessibility Checklist.

The <label> element

Labels must be programmatically associated with each form field control. Some form field controls, such as submit buttons, are automatically associated with a label. But for text fields, select menus, checkboxes and radio buttons, you must provide an explicit label using the <label> element so that assistive technologies can communicate the purpose of the form element to the user. If the visual label has not been explicitly associated using the <label> element, a screen reader user may only hear "edit" for a text field instead of "First Name edit". Each <label> element is associated with exactly one form control, however, a form control can have more than one <label> element associated with it.

Use one of the following methods to label form fields.

• Visible labels
• Invisible labels using alt text
• Invisible labels using Cascading Style Sheets (CSS)
• Invisible labels for form fields in a table

If your form contains both optional and required fields, use the following technique to clearly indicate the required fields on the form:

• Techniques for indicating required form fields

If your form includes scripts, see Checkpoint 7: Scripts to ensure any scripts used in the form are accessible.

Using the <label> element for visible labels

In the first example, the text input fields are programmatically associated with the corresponding label using the <label> element and the for attribute. The value of the for attribute must be the same as the value of the id attribute of the associated control.

Name:

Address:

<form action="mailto:somebody@ibm.com">
<label for="name1">Name</label>
<input name="name" id="name1" size="30" />
<label for="address">Address</label>
<input name="address" id="address" size="45" />
<input type="submit" value="Submit" />
</form>


The second example shows how to label a select menu using the same technique.

Select your shipping method Ground (7 business days) Air (3 business days) Next day air (1 business day)

<form>
<label for="shiptype">Select your shipping method</label>
<select id="shiptype" name="ship_method" size="1">
<option selected value="">Ground - 7 business days</option>
<option value="air">Air - 3 business days</option>
<option value="nextday">Next day air - 1 business day</option>
</select>
</form>


The third example shows how to label a <textarea> element using the same technique.

The <textarea> element indicates a multiple-line text entry field. The <textarea> form control must contain a corresponding label element as well. See the example below for an accessible <textarea>.

User comments:

...
<label for="usercomments">User comments:</label>
<textarea id="usercomments" name="textfield2" rows=3 cols=20></textarea>


Using the <label> element and alt text for invisible labels

If a form field does not have a visible label, a sighted user can probably determine the purpose of the field from looking at the page. However, a blind user cannot understand the purpose of the field unless there is an explicit label defined using the <label> element. This example shows a group of radio buttons from a user feedback form. There are five possible choices ranging from "Very Important" to "Not Important". To simplify the visual look of the page, only three of the radio buttons have visible text labels. A sighted user can see the intent of the unlabeled radio buttons, but a blind user will hear "radio button not checked" unless they are labeled.

Very Important

Important

Not Important

A subset of the code for the example is listed below. It shows how invisible images with appropriate alternative text were used to label the radio buttons with no visible labels.

...
<label for="vi">Very Important</label>
<input type="radio" name="1,300" value="5.0" id="vi" />
...
<label for="vii">
<img src="images/clearpixel.gif" height="1" width="1" border="0"
alt="Very important to important" /></label>
<input type="radio" name="1,300" value="4.5" id="vii" />
...


Using the <label> element and CSS for invisible labels

Another technique for creating invisible labels is to apply a CSS style to hide the labels. The labels are not visible on the page, but screen readers will read them and the page is usable to everyone even if the style sheet is disabled.

There are several methods to hide the labels, but some are not supported in all browsers. The method that works most consistently with a wide range of browsers and assistive technology is to add a new style that:

• Sets the height and width of the <label> element 1px, and the overflow property to hidden. Do not set the height and width to 0px since this is not supported in some assistive technology.
• Uses absolute positioning to place the label above the visible area of the page.

To modify the radio button example above to add a label using CSS, add the following code to the style sheet:

.hidden-label
{
position:absolute;
left:0px
top:-100px;
width:1px;
height:1px;
overflow:hidden;
}


Then, reference the CSS hidden-label class in the <label> element for those labels that are hidden.

...
<label class="hidden-label" for="vii">
Important to Very Important</label>
<input type="radio" name="1,300" value="4.5" id="vii" />
...


Invisible labels for form fields in a table

Placing a form in a table is sometimes preferred to give a page a nice "look and feel". This technique will show how to do that, but still make a form accessible. This table has been written so that it conforms to Checkpoint 10 Tableheaders. In addition, hidden labels are used to provide additional contextual information, as well as to satisfy accessibility checkers such as WebKing. Please note that this checklist no longer recommends that the title attribute be used to provide information on each form field.

<th><p>Apparel</p></th>
<th><p>Size</p></th>
<th><p>Color</p></th>
<th><p>Style</p></th>
...
<th bgcolor="#DFDFFF">
<p>Shoes</p>
</th>
<td valign="middle" bgcolor="#eeeeee" align="center">
<label for="cshoesize">
<img src="images/clearpixel.gif" height="1" width="1" border="0"
alt="shoe size" /></label>
<input type="text" name="ShoeSize" id="cshoesize" size="10" maxlength="30"/></td>
...
<label for="cshoecolor">
<img src="images/clearpixel.gif" height="1" width="1" border="0"
alt="shoe color" /></label>
<select name="Color" id="cshoecolor" >
<option value="None" selected="selected">Select a Color </option>
<option value="Tan">Tan </option>
<option value="Brown">Brown </option>
<option value="White">White </option>
<option value="Red">Red </option>
<option value="Black">Black </option>
</select></td>
<td valign="top" bgcolor="#eeeeee">
<fieldset><legend>Shoe Style:</legend>
<input type="radio" name="ShoeStyle" id="cshoestyle1" value="Sneaker"/>
<label for="cshoestyle1">Sneaker</label><br />
<input type="radio" name="ShoeStyle" id="cshoestyle2" value="Dressy"/>
<label for="cshoestyle2">Dressy</label><br />
<input type="radio" name="ShoeStyle" id="cshoestyle3" value="Casual"/>
<label for="cshoestyle3">Casual</label><br />
<input type="radio" name="ShoeStyle" id="cshoestyle4" value="Hiking"/>
<label for="cshoestyle4">Hiking</label>
</fieldset>
</td> ...


The tabindex attribute

The tabindex attribute of the <input> element can be used to assign a tab order for links, form controls, and objects. It is recommended that developers avoid use of the tabindex attribute. However, if you do choose to use the tabindex attribute, set the focus to the first element in the tab order. Also, try not to deviate from the standard document reading order when specifying tabindexes. Specifying a tabindex which is different that the normal document order for some but not all links and controls on a web page can cause confusion for screen reader users who usually read all elements, including plain text elements, in document order.

The accesskey attribute

The accesskey attribute allows authors to associate a keyboard shortcut with either a <label>, <a>, <caption>, or <legend> element.It is recommended that developers avoid use of the accesskey attribute. However, if you do choose to use the accesskey attribute, do not bold or underline style elements in control label text to show the value of an access key, because this may cause screen readers to speak the control labels incorrectly.

Techniques for indicating required fields

Some forms require specific fields to be completed before the form can be submitted. When required fields are used, they must be identified in an accessible way. It is not sufficient to mark required fields in red because someone who is color blind or using a screen reader will not get the information. Use the following accessible methods to indicate required fields:

• Document the method of identifying required fields above the form. For example, if an asterisk is used to indicate required fields, add the text 'An * indicates required fields.' at the top of the form. If this is added at the end of the form, the information isn't available to a screen reader user until they finish the form.
• Use color and a redundant method. For example, labels for required fields are red and include an asterisk.
• If layout tables are used to align form fields, put the label and the character to indicate a required field in the same table cell. If the asterisk is in one cell and the label is in another cell, they will not be read correctly by assistive technology.

The example below shows how to label required fields on a form.

* Name:

...
<td> <label for="reqfield">* Name:</label></td>
<td><input name="Name" id="reqfield" type="text" /></td>
...


Back to top

The following techniques are not required, however they greatly improve the accessibility of forms and are proposed enhancements to the HTML Techniques for Web Content Accessibility Guidelines (WCAG) 2.0 (link resides outside of ibm.com) working draft.

• The <fieldset> element
• The <optgroup> element
• The title attribute
• The value attribute

The <fieldset> element

Radio buttons and other controls can be grouped using the <fieldset> element. Unlike adding text above the radio buttons, the <fieldset> element programmatically associates the radio buttons with the text provided with the <legend> element. When you tab to a set of controls grouped using <fieldset>, screen readers read the legend, the form element label and the control status so the user has the context of the form element.

Choose your favorite ice cream flavor. Chocolate. Not pressed.

Choose your favorite ice cream flavor Chocolate Vanilla Chocolate Mint Chip

...
<fieldset>
<legend>Choose your favorite ice cream flavor</legend>
<input type="radio" name="chocolate" id="choc" />
<label for="choc">Chocolate</label>
<input type="radio" name="vanilla" id="vanilla" />
...
</fieldset>


The <optgroup> element

The <optgroup> element is used to group options in a drop-down list under the <select> element. Use <optgroup> when the user must choose from a long list of options. Groups of related choices are easier to grasp and remember than a single long list of options.

Accessibility Options: Web Software Java Hardware HPR Window-Eyes JAWS SVRE WebKing Bobby

...
<label for="menu">Accessibility Options:</label>
<select name="select" id="menu" >
<optgroup label="Checklists">
<option value="Web">Web</option>
<option value="Software">Software</option>
<option value="Java">Java</option>
<option value="Hardware">Hardware</option>
</optgroup>
...


The title attribute

The title attribute provides additional information about a form element. A "tool tip" is displayed when you position the mouse over form elements that contain title attributes. The title is also spoken by screen readers. The title attribute must not be used in place of the <label> element. This is incorrect use of the title attribute and will flag an accessibility error in most Web accessibility checking tools.

In the next example, users enter their phone number into three separate fields. The first input field is clearly labeled as "Phone:" and the <label> element has been defined for the field. The other fields have no visual labels, but invisible labels were added using CSS. In addition, the developer added the title attribute to provide information about the fields. Screen readers look for the <label> element, but if it isn't provided, they will read the title attribute.

Phone:  - Phone exchange  -  Phone extension

...
<label class="hidden-label" for="phone2">Phone exchange</label>
<input type="text" name="num2" id="phone2"
title="Enter your 3 digit phone exchange" />
...


The value attribute

The value attribute of the <input> element can be used to enter the description of the input text expected within the text field. In this example, the description "Type your address." is added in the address field. While this would leave no doubt to users about what information they were required to enter, one caveat is that the descriptive text must first be deleted before the user can enter the requested information. Because the prompt must be deleted, this technique is not required. The value attribute should never be used in place of the <label> element; it should only be used to enhance usability.

Address:

<form action="mailto:somebody@ibm.com">
<label for="address">Address</label>
<input name="address" id="address" value="Type your address." size="45" />
</form>

Back to top

Currently, form controls are only supported in HTML (not IBMIDDoc or XML DITA).

Back to top

Test the Web site to ensure that it complies with accessibility requirements.

Tools

• A Web accessibility checking tool. Examples of these tools are listed on the Worldwide Web Consortium web site.
• A screen reader

Techniques

The following techniques are required to verify accessible forms