Tests of FORM Controls Spanned by LABEL

Note: The text defined as a title for each INPUT element differs from the text contained in individual LABELs so that it can be clearly ascertained which is being spoken: the contents of the title or the contents of the LABEL. Likewise, the LEGEND for each FIELDSET contains distinct text, again for purposes of testing whether or not the LEGEND is spoken correctly, as well as providing a means of differentiating between sample FORMs

Test Form 1: INPUT element spanned by LABEL

Test 2 | HTML 4.01 | WCAG Techs | top of page

Test Form 2: INPUT element uses explicit element closing tag

Test 1 | HTML 4.01 | WCAG 1.0 | top of page

Pertinent Parts of the HTML 4.01 Specification

excerpt from Section 17.9.1

The LABEL element may be used to attach information to controls. Each LABEL element is associated with exactly one form control.

The for attribute associates a label with another control explicitly: the value of the for attribute must be the same as the value of the id attribute of the associated control element. More than one LABEL may be associated with the same control by creating multiple references via the for attribute.

further into the definition of the LABEL element, the Technical Recommendation states:

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

[example skipped for brevity's sake]

Note that this technique cannot be used when a table is being used for layout, with the label in one cell and its associated control in another cell.

When a LABEL element receives focus, it passes the focus on to its associated control. See the section below on access keys for examples.

Test 1 | Test 2 | WCAG Techs | top of page

Pertinent Sections of WCAG 1.0 Techniques Document

11.3 Labeling form controls

Checkpoints in this section:

• Checkpoint 12.4 Associate labels explicitly with their controls. [Priority 2]
• Checkpoint 10.2 Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned. [Priority 2]

An example of LABEL used with "for" in HTML 4.01 is given in the previous section.

A label is implicitly associated with its form control either through markup or positioning on the page. The following example shows how a label and form control may be implicitly associated with markup.

Example.

   <LABEL for="firstname">First name: 
     <INPUT type="text" id="firstname" tabindex="1">
   </LABEL>

Test 1 | Test 2 | HTML 4.01 | top of page