View source for 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

[[Category: Techniques]]
[[Category: Failure Techniques]]
[[Category: Techniques Accepted]]
[[Category: Ready for XML]]

==Status==
* Added to XML by AWK Dec 20, 2013
* In [http://www.w3.org/2002/09/wbs/35422/20140829ttf/ 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 <code>label</code> 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)
** [http://www.w3.org/WAI/WCAG20/quickref/#qr-content-structure-separation-programmatic How to Meet 1.3.1 (Info and Relationships)]

** [http://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html Understanding Success Criterion 1.3.1 (Info and Relationships)]

* Success Criterion 4.1.2 (Name, Role, Value)
** [http://www.w3.org/WAI/WCAG20/quickref/#qr-ensure-compat-rsv How to Meet 4.1.2 (Name, Role, Value)]
** [http://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html Understanding Success Criterion 4.1.2 (Name, Role, Value)]

==Description==

This failure describes a problem that occurs when no <code>label</code> 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 <code>label</code> element are:

* <code>input</code> (except for those noted in Note 2)
* <code>textarea</code>
* <code>select</code> 

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

* Submit and Reset buttons (<code>input type="submit"</code> or <code>input type="reset"</code>)
* Image buttons (<code>input type="image"</code>)
* Hidden input fields (<code>input type="hidden"</code>)
* Script buttons (<code>button</code> elements or <code>input type="button"</code>)

==Examples==
===Failure Example 1:===

The following example demonstrates a form that visually presents labels for form controls, but does not use the <code>label</code> 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:====

<pre>
<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>
</pre>

===Failure Example 2:===

In the following code example, <code>label</code> 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:====

<pre>
<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>
</pre>

===Failure Example 3:===

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

====Example Code:====

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

==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 <code>radio</code>, <code>checkbox</code>, <code>text</code>, <code>file</code>, <code>password</code>, <code>textarea</code> and <code>select</code> in the Web page:

# Check that the design has visual text that identifies the purpose of the control
# Check that these input elements have a programmatically determined label associated in one of the following ways:
## the text label is contained in a <code>label</code> element that is correctly associated to the respective input element via the label's <code>for</code> attribute (the <code>id</code> given as value in the <code>for</code> attribute matches the <code>id</code> of the text label element)
## the control is contained within a <code>label</code> element that contains the label text
## the text label is correctly programmatically associated with the input element via the <code>aria-labelledby</code> attribute (the <code>id</code> given as value in the <code>aria-labelledby</code> attribute matches the <code>id</code> of the text label element)
## the input element is programmatically determined through the value of either its <code>aria-label</code> or <code>title</code> 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.