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 Information

• 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 web page.
• Each id attribute value of a form control element within a web 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 web pages with densely packed form controls, label elements can be hidden from the visual rendering using CSS techniques of absolute positioning. (ex. Survey form using hidden labels, 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. (ex. Date picker using title)

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 Information

• If both title attribute and alt attribute are specified, the title attribute will override the alt attribute.
• 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 Information

• 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 and the content should help to identify the purpose of the form control on the web 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 Information

• Content must contain at least three printable characters

Each effective label within a web page should be unique.

Implementation Information

The calculation of effective label primary content:

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

Note: If more than one primary source of content is defined for a form control element, only one of the sources will be used for the pimrary content and other sources will be ignored. The possible primary sources in the above list are in the same order as the order of precedence.

effective label modifications:

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

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

• CSS font-size property can be usedto 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.

• 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". (ex. Subscription form with required fields)
  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.

• 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". (ex. Subscription form with invalid field feedback)
  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 should follow that provides a list of links with each link text describing the problem each invalid form field of the form has:

• 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. (ex. Subscription form with required fields, Subscription form with invalid field feedback)
• 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.

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