Labels for Form Controls Rules

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.

Definitions

Effective Label
The effective label of a form control is the text communicated by assistive technologies to orient the user to the purpose of the form control on a web page. The effective label is calculated based on the primary label of a form control and if present the content of the Fieldset/Legend elements. Fieldset/Legend elements are useful for making form controls with the same primary label unique and therefore easier to distiguish their purpose on a web page.
When a label for a form control is not defined in the markup, assistive technologies may try to guess a label based on the text that is in proximity of the form control. This leads to forms that are difficult or impossible to complete since the assumed label maybe incomplete or misleading.
For more information on the calculation of the effective label see Rule #7.

Accessibility Evaluation Rules

no. Testing Description Implementation
FAE Firefox
Accessibility
Extension
1 Fail/Pass

The elements input[type="text | password | checkbox | radio | file"], select and textarea must have:

  1. label element content that has the label.for attribute referencing the id attribute of the form control element, or
  2. title attribute content on the form control element itself.

Implementation Notes

  • If both label element and title attribute are specified, the label element will override the title attribute.
  • Each label element references an id attribute on the page.
  • Each id attribute value of a form control element within a page must be valid and unique.
  • The label element should not encapsulate select and textarea elements. The text child nodes of a textarea element content that the user entered and option element content of a select element will be included as part of the effective label.
  • For pages with densely packed form controls, label elements can be hidden from the visual rendering using CSS techniques of absolute positioning. (Ex. Date picker using hidden labels.)
  • The use of the title attribute as the label of a form control should generally be avoided, but may be useful in cases where form controls are densely packed and the use of visually rendered or hidden label elements is inconvenient, or where the label information is useful as a tooltip.
1.0 1.5
2 Fail/Pass

The element input[type="image"] must have:

  1. alt attribute content on the form control element itself, or
  2. title attribute content on the form control element itself.

Implementation Notes

  • If both title attribute and alt attribute are specified, the title attribute will override the alt attribute.
  • The title attribute should be meaningful even when it is specified with the purpose of providing a tooltip for an image in addition to the alt attribute, as it will override the alt attribute and also be the effective label.
1.0 1.5
3 Fail/Pass

The element input[type="button] must have and the element input[type="submit | reset"] may have:

  1. value attribute content on the form control element itself, or
  2. title attribute content on the form control element itself.

Implementation Notes

  • If both title attribute and value attribute are specified, the title attribute will override the value attribute.
  • When there are more than one input[type="button | submit | reset"] elements of one type, all with the same value attribute, on a page, the title attributes can be used to differentiate the effective labels of the form controls.
  • The use of the value and title attribute with the input[type="submit | reset"] can be used to uniquely identify the information to be submitted or reset when there is more than one form on a web page.
1.0 1.5
4 Fail/Pass

Each label, button and legend element must contain text content.

Implementation Notes

  • Content must consist of at least three printable characters (space characters are ignored).
  • Text content includes all text nodes contained by the label, button or legend element.
  • If an img element with an alt attribute is contained in a label, button or legend element, the alt attribute value is inserted into the text content in the order of appearance in the document to become part of the effective label of the form control.
1.0 1.5
5 Warning/Pass

The text content of each label and legend element should not only come from the alt attribute of img elements.

Implementation Notes

  • Users can not easily change the color or size of images without distortions, which may make some labels or form controls unreadable or unusable by people with disabilities
NI NI
6 Fail/Pass

If a form control has an id attribute its value must be unique on the page.

Implementation Notes

  • id attributes must be unique on a page to validate to HTML standards.
NI 1.5
7 Warning/Pass

Each effective label within a page should be unique.

Implementation Notes

When additional contextual information exists for a form control, its effective label is constructed from both the additional text and its primary label. When there is no additional information for a form control, its effective label is equivalent to its primary label.

There is one common case in HTML markup where an effective label is created by concatenation of additional text: namely when a form control has an associated fieldset/legend element.

Common case for constructing an effective label of a form control by concatenation of additional text:

For any form control contained in a fieldset element that also contains a legend element, the effective label of the form control consists of the concatenation of the text content of the legend element, followed by a space character separator, followed by the primary label content of the form control.

Primary label content for specific form controls:

  • input[type="text | password | checkbox | radio | file"], select and textarea
    1. Includes the text content of the associated label element plus any alt attribute values of img elements contained in the label element, inserted in document order (delimited by space characters).
    2. If a label element is not associated with the form control, the title attribute value is used (when present).
  • input[type="image"]
    1. The alt attribute value.
    2. If the alt attribute is not defined, the title attribute value is used (when present).
  • input[type="button"]
    1. The value attribute value.
    2. If the value attribute is not defined, the title attribute value is used (when present).
  • button element
    1. Includes the text content of the button element plus any alt attribute values of img elements contained by the button element, inserted in document order (delimited by space characters).
  • input[type="submit"]
    1. By default the text value "submit" is used.
    2. If the value attribute is defined, its value is used.
    3. If the value attribute is not defined, the title attribute value is used (when present).
  • input[type="reset"]
    1. By default the text value "reset" is used.
    2. If the value attribute is defined, its value is used.
    3. If the value attribute is not defined, the title attribute value is used (when present).
NI 1.5
8 Check/Pass

Text content that cannot receive the focus should not be placed between form controls.

Implementation Notes

  • Text instructions on filling out the form should be placed before the form. h2 or other heading element that includes the word "Instructions" should be used at the beginning of the instructions.
  • If placing text content between form controls cannot be avoided, the text content can be included in the tabbing order by doing the following: Put a tabindex attribute with the value of "0" on an a element and use the anchor element as the container element for the text content. The href attribute should reference the id attribute content of the link. Example: <span><a id="inst1" tabindex="0" href="#inst1">... instructions ...</a></span> This ensures screen reader users in forms mode will hear the instructions as they TAB through the form controls.
NI NI
9 Check/Pass

The elements input, select, textarea and button should allow text size to change with the zoom setting of the browser.

Implementation Notes

  • The CSS font-size property can be used to set the font size to 100% Example: input, select, textarea, button { font-size: 100%; }
NI NI
10 Check

Required form controls should have the word "required" as part of the effective label.

Implementation Notes

  • For form controls with effective labels calculated from label or legend elements, the word "required" can be included by using one of the following techniques:
    1. Use an img element with the alt attribute content that includes the word "required".
    2. Include the word "required" as part of the label or legend element content.
    3. Use the * or other special character with an abbr element and include the word "required" as part of the title attribute content of the abbr element. Example: <abbr title="required">*</abbr>
  • For form controls with effective labels calculated from the title attributes, the word "required" can be included as part of the title attribute content.
NI 1.5
11 Check

Invalid form controls should have the word "invalid" as part of the effective label.

Implementation Notes

  • For form controls with effective labels calculated from label or legend elements, the word "invalid" can be included using one of the following techniques:
    1. Use an img element with the alt attribute content that includes the word "invalid".
    2. Include the word "invalid" as part of the label or legend element content.
    3. Use the * or other special character with an abbr element, and include the word "invalid" as part of the title attribute content of the abbr element. Example: <abbr title="required">*</abbr>
  • For form controls with effective labels calculated from the title attributes, the word "invalid" can be included as part of the title attribute content.
NI 1.5
12 Check

When content of a form is validated as the user submits the form, a response page that provides a list of links with each link text describing the problem with each invalid form field should follow.

Implementation Notes

  • ol and li elements can be used to create a list of links, i.e. a elements, with the href attribute content that references the id attribute content of the associated form control. Selecting the link places the focus on the form control with the problem mentioned in the link text.
  • A heading element, i.e. h2-h6 elements, should immediately precede the list of links.
NI NI
13 Check

When content of a form is validated as the user fills out each form field, an alert box must indicate if the input is invalid as the user tries to move the focus to the next form control.

NI NI
14 Check

Ensure that form fields are in a logical tabbing order.

Implementation Notes

  • The default tabbing order of form controls is defined by the order of appearance of the controls in the page.
  • The tabindex attribute can be used to change the tabbing order order of form controls.
NI NI

FAE Rule Implemetation

Illinois Functional Accessibility Evaluator 1.0
The Illinois Functional Accessibility Evaluator is a web based tool to help developers evaluate web resources for the use of the iCITA HTML best practices.
Web interface cannot currently analyze content generated dynamically with javascript.
Illinois Firefox Accessibility Extension
The Illinois Firefox Accessibility Extension is a Firefox add-in that is designed to identify accessibility features for both static and dynamically generated html content.
Useful for identifying the location of specific accessibility problems for failures and warnings indentified in FAE reports.
Create FAE reports for a page that uses javascript to generate page content with the FAE DHTML Report feature.