Labels for Form Controls Overview

Overview

Form controls must be labelled and grouped to provide explicit references that can be used by assistive technologies to communicate the purpose of the form controls. The tabindex attribute can be used to include instructions and other information in the tab navigation ordering so that screen reader users can easily orient the information needed to complete the form.

Another important feature of forms is to provide information on errors or the validity of form fields. Many forms provide feedback to the user on whether form fields have been filled out correctly, and there are many ways to do so with fields that need to be updated before the form data will be accepted. These techniques must be carried out in an accessible way, or people with disabilities may not be aware of the problem and/or which form fields need to be updated for the form to be accepted.

Benefits to People with Disabilities

Labeling form controls properly helps people with disabilities:

1. Understand the purpose of a form control within a web resource
2. Identify and understand instructions on how to complete form control content
3. Identify form controls with invalid or incomplete content
4. Understand information needed to correct form field with invalid content

Benefits to All Users

1. Labels for checkboxes and radio buttons increase the effective target size for mouse actions to change the state of a checkbox or radio button.
2. Consistent feedback on errors and invalid or incomplete form content makes it easier for users to identify the form content that needs to be updated to make the form acceptable.

Benefits to Developers

1. Centralized and consistent management of form input errors makes it easier to manage the creation and maintenance of web forms.

Related Resources

1. Screen reader software support for the TITLE attribute (Paciello Group)
2. Assistive technology users test title attribute access (Paciello Group)
3. 20: HTML forms - the basics (Opera Web Standards Curriculum)

HTML Markup Details

label element for input[type="text"], input[type="password"], select and textarea elements

The primary way to provide an effective label for a form control is to use the label element using the for attribute to reference the id attribute of the form control. The label element can also encapsulate form controls, but this technique has problems with many types of assistive technologies.

value attribute for input[type="button"], input[type="submit"] and input[type="reset"]

The value attribute, defined in input element, should provide an effective label for input elements with the type="button", type="submit" and type="reset".

alt attribute

The alt attribute should provide an effective label for input elements with the type="image".

If the label element content includes an img element, the alt attribute of the img element will be part of the effective label.

button element

The text content of the button element is an effective label. If the button element content includes an img element, the alt attribute value of the img element will be part of the effective label.

title attribute

The title attribute, supported by most form control elements, is the secondary way to provide an effective label for html form controls. When a set of form controls is laid out in columns or rows, the appropriate effective label for several controls should be at the beginning of the row or the top of the column.

fieldset and legend elements

The fieldset and legend elements are used to add grouping information to effective labels for a group of related html form controls.

tabindex attribute

The tabindex attribute can be used to make important information related to the form, e.g. instructions, part of the TAB navigation order.

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards

10.1 Provide labels or titles for all form fields.

10.2 Provide legends for groups of form fields.

10.3 Ensure that form fields are in a logical tab order.

10.4 Avoid placing non-focusable text between form fields.

10.5 Ensure that text in form fields can be enlarged.

Section 508

1194.22 (n) 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

W3C Web Content Accessibility Guidelines 2.0

2.4.6 Labels Descriptive: Labels and headings are descriptive.

3.3.1 Error Identification: If an input error is detected, the item that is in error is identified and the error is described to the user in text.

3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input.

3.3.3 Error Suggestion: If an input error is detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.

3.3.4 Error Prevention (Forms including Legal, Financial, Data)

3.3.5 Help: Context-sensitive help is available.

3.3.6 Error Prevention (All forms)

W3C Web Content Accessibility Guidelines 1.0

10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.

12.4 Associate labels explicitly with their controls.