Form Control Rules

Markup

input[type=submit | reset] (HTML4)

input[type=button] (HTML4)

input[type=image] (HTML4)

fieldset/legend (HTML4)

label (HTML4)

input[title] (HTML4)

select (HTML4)

textarea (HTML4)

input[type=text|password|radio|checkbox|file] (HTML4)

Rules

Rules for Form Control
# Testing Description Implementation
FAE Firefox
Accessibility
Extension
FORM.1 Manual Check FORM.1

The effective Label for a form control must uniquely identify the purpose of a form control on a web page.

Requirement Notes

  • When form controls do not have labels the purpose of the form controls will not be understood by people with disabilities
  • Positioning text offscreen can be used to add additional context and instructional information to a form control label without using additional space on the screen
  • fieldset/legend elements can help make form controls with same label unique (ie. the address label in a shipping and billing address information)
NI NI
FORM.2 Pass/Fail FORM.2

The elements input[type=“text | password | checkbox | radio | file”], select and textarea must have labels.

Requirement Notes

The elements input[type=“text | password | checkbox | radio | file”], select and textarea must have:
# label element content that has the label.for attribute referencing the id attribute of the form control element, or
# 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 must reference 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 input[type=text], input[type=password], 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
FORM.3 Pass/Fail FORM.3

The element input[type=“image”] must have alt text:

Requirement Notes

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
FORM.4 Pass/Fail FORM.4

The elements input[type=“button”] must have and input[type=[submit | reset”] may have value text.

Requirement Notes

The elements 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
FORM.5 Pass/Fail FORM.5

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

Requirement Notes

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
FORM.6 Pass/Warning FORM.6

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

Requirement 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
FORM.7 Pass/Fail FORM.7

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.
1.0 1.5
FORM.8 Pass/Warning FORM.8

Each effective label within a page should be unique.

Requirement Notes

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
FORM.9 Pass/Check FORM.9

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

Requirement Notes

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: … instructions… This ensures screen reader users in forms mode will hear the instructions as they TAB through the form controls.
NI NI
FORM.10 Pass/Check FORM.10

Use CSS to allow form control text size to change with the zoom setting of the browser.

Requirement Notes

The input, select, textarea and button elements 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
FORM.11 Manual Check FORM.11

Style the form control with focus differently than form controls without focus.

Requirement Notes

  • Use CSS or if necessary event handlers to update CSS styling to make the visual rendering of form controls with focus easily distinguishable from form controls without focus.
NI NI
FORM.12 Manual Check FORM.12

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: *
  • 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 View
FORM.13 Manual Check FORM.13

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: *
  • 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 View
FORM.14 Manual Check FORM.14

Browser or client side (i.e. using javascript) validation of a form control values

Requirement Notes

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 1.5 View
FORM.15 Manual Check FORM.15

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 1.5 View