Labels for Form Controls Rules

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.

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.

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.

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.

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

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.

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).

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.

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%; }

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.

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.

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.

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.

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.