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 elements input[type="button" | submit | reset"] must 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.

Each label and legend element must contain content that helps identify the purpose of the form control on the page. If the title attribute is defined for an input. select, textarea or button element, it must also contain content since it will be used by assistive technologies as part of the effective label for the form control.

Implementation Notes

• Content must contain at least three printable characters

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

1. effective label = BUTTON
2. effective label = LABEL
3. effective label = TITLE
4. effective label = ALT
5. effective label = VALUE

• If the form control is contained in a fieldset element with an associated legend element, the legend element content becomes part of the effective label according to the following formulas:
  1. effective label = LEGEND + BUTTON
  2. effective label = LEGEND + LABEL
  3. effective label = LEGEND + TITLE
  4. effective label = LEGEND + ALT
  5. effective label = LEGEND + VALUE
• If an img element with an alt attribute is contained in a label of button element, the content of the alt attribute is inserted into the label or button content in the order of appearance in the document to become part of the effective label.
• If multiple label elements reference the same form control, their contents are concatenated in the order of appearance in the document to become part of the effective label.

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.