- 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
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: <table border="1"> <tr><th>Question</th><th id="yes">Yes</th><th id="no">No</th><th id="dnk">Do not know</th></tr> <tr><th id="q1">Are there enough choices in your 401k?</th> <td><input type="radio" aria-labelledby="q1 yes" name="q1ans" /> <td><input type="radio" aria-labelledby="q1 no" name="q1ans" /> <td><input type="radio" aria-labelledby="q1 dnk" name="q1ans" /> </tr> <tr><th id="q2">Are there enough index fund choices in your 401k?</th> <td><input type="radio" aria-labelledby="q2 yes" name="q2ans" /> <td><input type="radio" aria-labelledby="q2 no" name="q2ans" /> <td><input type="radio" aria-labelledby="q2 dnk" name="q2ans" /> </tr> </table> 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: <table border="1"> <tr><th>Question</th><th id="yes">Yes</th><th id="no">No</th><th id="dnk">Do not know</th></tr> <tr><th id="q1">Are there enough choices in your 401k?</th> <td><input type="radio" aria-labelledby="q1 yes" name="q1ans" /> <td><input type="radio" aria-labelledby="q1 no" name="q1ans" /> <td><input type="radio" aria-labelledby="q1 dnk" name="q1ans" /> </tr> <tr><th id="q2">Are there enough index fund choices in your 401k?</th> <td><input type="radio" aria-labelledby="q2 yes" name="q2ans" /> <td><input type="radio" aria-labelledby="q2 no" name="q2ans" /> <td><input type="radio" aria-labelledby="q2 dnk" name="q2ans" /> </tr> </table> 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="1"> <tr><th>Question</th><th id="yes">Yes</th><th id="no">No</th><th id="dnk">Do not know</th></tr> <tr><th id="q1">Are there enough choices in your 401k?</th> <td><input type="radio" aria-labelledby="q1 yes" name="q1ans" /> <td><input type="radio" aria-labelledby="q1 no" name="q1ans" /> <td><input type="radio" aria-labelledby="q1 dnk" name="q1ans" /> </tr> <tr><th id="q2">Are there enough index fund choices in your 401k?</th> <td><input type="radio" aria-labelledby="q2 yes" name="q2ans" /> <td><input type="radio" aria-labelledby="q2 no" name="q2ans" /> <td><input type="radio" aria-labelledby="q2 dnk" name="q2ans" /> </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="1"> <tr><th>Question</th><th id="yes">Yes</th><th id="no">No</th><th id="dnk">Do not know</th></tr> <tr><th id="q1">Are there enough choices in your 401k?</th> <td><input type="radio" aria-labelledby="q1 yes" name="q1ans" /> <td><input type="radio" aria-labelledby="q1 no" name="q1ans" /> <td><input type="radio" aria-labelledby="q1 dnk" name="q1ans" /> </tr> <tr><th id="q2">Are there enough index fund choices in your 401k?</th> <td><input type="radio" aria-labelledby="q2 yes" name="q2ans" /> <td><input type="radio" aria-labelledby="q2 no" name="q2ans" /> <td><input type="radio" aria-labelledby="q2 dnk" name="q2ans" /> </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 UTC