ARIA-edit: F68: Failure of Success Criterion 1.3.1 and 4.1.2 due to the association of label and user interface controls not being programmatically determined

Status

• Added to XML by AWK Dec 20, 2013
• In Techniques Task Force: ARIA techniques for 29 Aug 2013

TF Notes

Need to investigate if example 2 should be dropped completely as it is reported that this now works fine http://www.html5accessibility.com/tests/form-labels.html

H44 has a similar list of form controls that should be labeled in the description, and should be changed like the change here.

Update Detlev 28. August 2013

• I have added the condition "The control is contained within a label element that contains the label text" to point 2 of the test procedure to reflect that controls nested within labels no seem to work throughout
• I have deleted the now incorrect / misleading first code example in Example 2 (controls nested within labels)
• I have changed the text introducing Example 2:
  • WAS: "In the following code examples, the names associated with the text input controls are not properly determined by assistive technology."
  • CHANGED TO: "In the following code example, label elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology."
• I changed the Expected Results part of the test:
  • WAS: "If check #1 is true and check #2 is false, then this failure condition applies and the content fails these Success Criteria."
  • CHANGED TO: "If check #1 is true and all options of check #2 are false, then this failure condition applies and the content fails these Success Criteria."

Applicability

HTML and XHTML controls that use visible labels

This failure relates to:

• Success Criterion 1.3.1 (Info and Relationships)
  • How to Meet 1.3.1 (Info and Relationships)

• • Understanding Success Criterion 1.3.1 (Info and Relationships)

• Success Criterion 4.1.2 (Name, Role, Value)
  • How to Meet 4.1.2 (Name, Role, Value)
  • Understanding Success Criterion 4.1.2 (Name, Role, Value)

Description

This failure describes a problem that occurs when no label element and no appropriate WAI-ARIA attribute is used to explicitly associate a form control with a label where the visual design uses a label.

Note 1: Elements that can use an explicitly-associated label element are:

• input (except for those noted in Note 2)
• textarea
• select

Note 2: The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button).

• Submit and Reset buttons (input type="submit" or input type="reset")
• Image buttons (input type="image")
• Hidden input fields (input type="hidden")
• Script buttons (button elements or input type="button")

Examples

Failure Example 1:

The following example demonstrates a form that visually presents labels for form controls, but does not use the label element to associate them with their controls. The code example below is a failure because assistive technology may not be able to determine which label goes with which control.

Example Code:

<form>
 First name: 
 <input type="text" name="firstname">
 <br />
 Last name: 
 <input type="text" name="lastname">
 <br />
 I have a dog <input type="checkbox" name="pet" value="dog" />
 I have a cat <input type="checkbox" name="pet" value="cat" />
</form>

Failure Example 2:

In the following code example, label elements are present, but they are not programmatically linked to the corresponding input controls and may therefore not be properly determined by assistive technology

Example Code:

<form action="..." method="post"> 
<p> 
<label>First Name </label>
<input type="text" name="firstname"> 
<label>Last Name</label> 
<input type="text" name="lastname"> 
</p> 
</form>

Failure Example 3:

The search text box in the following code example does not have a name.

Example Code:

<input type="text" value="Type your search here"><input type="submit" value="Search">

Related Techniques

• H44: Using label elements to associate text labels with form controls
• H65: Using the title attribute to identify form controls when the label element cannot be used
• http://www.w3.org/TR/WCAG-TECHS/G167.html
• Using aria-label
• Using_aria-labelledby_to_concatenate_a_label_from_several_text_nodes
• Using_aria-labelledby_to_name_controls
• Using_aria-label_to_provide_an_invisible_label_where_a_visible_label_cannot_be_used

Tests

Procedure

For all input elements of type radio, checkbox, text, file, password, textarea and select in the Web page:

1. Check that the design has visual text that identifies the purpose of the control
2. Check that these input elements have a programmatically determined label associated in one of the following ways:
   1. the text label is contained in a label element that is correctly associated to the respective input element via the label's for attribute (the id given as value in the for attribute matches the id of the text label element)
   2. the control is contained within a label element that contains the label text
   3. the text label is correctly programmatically associated with the input element via the aria-labelledby attribute (the id given as value in the aria-labelledby attribute matches the id of the text label element)
   4. the input element is programmatically determined through the value of either its aria-label or title attributes

Expected Results

• If check #1 is true and all options of check #2 are false, then this failure condition applies and the content fails these Success Criteria.