W3C home > Mailing lists > Public > public-wcag2-techs@w3.org > August 2010

ARIA Techniques - Associating multiple labels with a form control using ARIA-LABELLEDBY

From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
Date: Thu, 05 Aug 2010 21:29:46 +0000
To: public-wcag2-techs@w3.org
Message-Id: <E1Oh80Y-0001bO-UV@otto.w3.org>

Submitter's Name: Sailesh Panchang
Submitter's Email: spanchang02@yahoo.com

Technique ID: UNKNOWN
Short Name: Associating multiple labels with a form control using ARIA-LABELLEDBY
Technique Category: ARIA Techniques
Success Criterion Reference: UNKNOWN

Applicability:
The ARIA-LABELLEDBY attribute may be used to associate more than one label with a form control. For  instance, it is useful for labelling a form control with its row header and column header when a form is contained in a data-table. 


UA Issues:
JAWS 11 reads the radio buttons with row and column headers correctly in forms mode in Internet Explorer 8 and Firefox 3.6
Window-Eyes 7.2 reads the radio buttons with row and column headers correctly in forms mode in Firefox 3.6
NVDA 2009 reads the radio buttons with row and column headers correctly in forms mode in Firefox 3.6


Description:
Set unique id values to  row and column header cells. Include an aria-labelledby attribute on  every form control in the data table. The value of this attribute should include the id-value of the related row header and column header cells seperated by a space.

Example 1 Head: Survey form
Example 1 Description:
&lt;table border=&quot;1&quot;&gt;
&lt;tr&gt;&lt;th&gt;Question&lt;/th&gt;&lt;th id=&quot;yes&quot;&gt;Yes&lt;/th&gt;&lt;th id=&quot;no&quot;&gt;No&lt;/th&gt;&lt;th id=&quot;dnk&quot;&gt;Do not know&lt;/th&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th id=&quot;q1&quot;&gt;Are there enough choices in your 401k?&lt;/th&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q1 yes&quot; name=&quot;q1ans&quot; /&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q1 no&quot; name=&quot;q1ans&quot; /&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q1 dnk&quot; name=&quot;q1ans&quot; /&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;th id=&quot;q2&quot;&gt;Are there enough index fund choices in your 401k?&lt;/th&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q2 yes&quot; name=&quot;q2ans&quot; /&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q2 no&quot; name=&quot;q2ans&quot; /&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q2 dnk&quot; name=&quot;q2ans&quot; /&gt;
&lt;/tr&gt;
&lt;/table&gt;


Related Techniques:
H65

Test Procedure:
Every row header and column header cell has an id attribute with a unique id value
The aria-labelledby attribute is assigned to every form control in the table.  Its value is set to id-values of related header cells separated by a space
 

Expected Result:
All steps are true

Test File 1:
&lt;table border=&quot;1&quot;&gt;
&lt;tr&gt;&lt;th&gt;Question&lt;/th&gt;&lt;th id=&quot;yes&quot;&gt;Yes&lt;/th&gt;&lt;th id=&quot;no&quot;&gt;No&lt;/th&gt;&lt;th id=&quot;dnk&quot;&gt;Do not know&lt;/th&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;th id=&quot;q1&quot;&gt;Are there enough choices in your 401k?&lt;/th&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q1 yes&quot; name=&quot;q1ans&quot; /&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q1 no&quot; name=&quot;q1ans&quot; /&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q1 dnk&quot; name=&quot;q1ans&quot; /&gt;
&lt;/tr&gt;
&lt;tr&gt;&lt;th id=&quot;q2&quot;&gt;Are there enough index fund choices in your 401k?&lt;/th&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q2 yes&quot; name=&quot;q2ans&quot; /&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q2 no&quot; name=&quot;q2ans&quot; /&gt;
&lt;td&gt;&lt;input type=&quot;radio&quot; aria-labelledby=&quot;q2 dnk&quot; name=&quot;q2ans&quot; /&gt;
&lt;/tr&gt;
&lt;/table&gt;


Test File 1 Pass/Fail: pass


No guidelines reference was submitted!
No example 2 header was submitted!
No example 2 description was submitted!
No resource 1 title submitted!
No resource 1 URI submitted!
No resource 2 title submitted!
No resource 2 URI submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!
No additional notes were submitted!


------------------------------------------------

<technique id="UNKNOWN">
<short-name>Associating multiple labels with a form control using ARIA-LABELLEDBY</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>
The ARIA-LABELLEDBY attribute may be used to associate more than one label with a form control. For  instance, it is useful for labelling a form control with its row header and column header when a form is contained in a data-table. 

</applicability>
<ua_issues>
JAWS 11 reads the radio buttons with row and column headers correctly in forms mode in Internet Explorer 8 and Firefox 3.6
Window-Eyes 7.2 reads the radio buttons with row and column headers correctly in forms mode in Firefox 3.6
NVDA 2009 reads the radio buttons with row and column headers correctly in forms mode in Firefox 3.6

</ua_issues>
<description>
Set unique id values to  row and column header cells. Include an aria-labelledby attribute on  every form control in the data table. The value of this attribute should include the id-value of the related row header and column header cells seperated by a space.
</description>

<examples>
<ex_head_1>
Survey form
</ex_head_1>
<ex_desc_1>
<table border=&quot;1&quot;>
<tr><th>Question</th><th id=&quot;yes&quot;>Yes</th><th id=&quot;no&quot;>No</th><th id=&quot;dnk&quot;>Do not know</th></tr>
<tr><th id=&quot;q1&quot;>Are there enough choices in your 401k?</th>
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q1 yes&quot; name=&quot;q1ans&quot; />
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q1 no&quot; name=&quot;q1ans&quot; />
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q1 dnk&quot; name=&quot;q1ans&quot; />
</tr>
<tr><th id=&quot;q2&quot;>Are there enough index fund choices in your 401k?</th>
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q2 yes&quot; name=&quot;q2ans&quot; />
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q2 no&quot; name=&quot;q2ans&quot; />
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q2 dnk&quot; name=&quot;q2ans&quot; />
</tr>
</table>

</ex_desc_1>
<ex_head_2>

</ex_head_2>
<ex_desc_2>

</ex_desc_2>
</examples>

<resources>
<resources_title1>

</resources_title1>
<resource_uri1>

</resource_uri1>
<resources_title2>

</resources_title2>
<resource_uri2>

</resource_uri2>
</resources>

<related_techniques>
<related_technique>
H65
</related_technique>
</related_techniques>

<tests>
<procedure>
Every row header and column header cell has an id attribute with a unique id value
The aria-labelledby attribute is assigned to every form control in the table.  Its value is set to id-values of related header cells separated by a space
 
</procedure>
<expected_result>
All steps are true
</expected_result>
<test_file_1>
<table border=&quot;1&quot;>
<tr><th>Question</th><th id=&quot;yes&quot;>Yes</th><th id=&quot;no&quot;>No</th><th id=&quot;dnk&quot;>Do not know</th></tr>
<tr><th id=&quot;q1&quot;>Are there enough choices in your 401k?</th>
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q1 yes&quot; name=&quot;q1ans&quot; />
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q1 no&quot; name=&quot;q1ans&quot; />
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q1 dnk&quot; name=&quot;q1ans&quot; />
</tr>
<tr><th id=&quot;q2&quot;>Are there enough index fund choices in your 401k?</th>
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q2 yes&quot; name=&quot;q2ans&quot; />
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q2 no&quot; name=&quot;q2ans&quot; />
<td><input type=&quot;radio&quot; aria-labelledby=&quot;q2 dnk&quot; name=&quot;q2ans&quot; />
</tr>
</table>

</test_file_1>
<pass_fail_1>
pass
</pass_fail_1>
<test_file_2>

</test_file_2>
<pass_fail_2>

</pass_fail_2>
</tests>

</technique>

Additional Notes:
Received on Thursday, 5 August 2010 21:29:48 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 21 March 2011 06:17:06 GMT