- From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
- Date: Thu, 26 Jan 2012 05:14:05 +0000
- To: public-wcag2-techs@w3.org
Submitter's Name: Pierre Dubois Submitter's Email: duboisp2@gmail.com Technique ID: UNKNOWN Short Name: Using table row grouping to associate data cells with header cells in data tables Technique Category: HTML and XHTML Techniques Success Criterion Reference: UNKNOWN Applicability: Associate data cells with multiple headers by using the row grouping (thead element and one or more tbody element) Description: The objective of this technique is to associate header cells with data cells in a simple or complex tables using the row grouping thead and tbody. The thead element may be used to identify all the column cell heading. The tbody element may be used to identify the data cell with a minimum of one cell heading per row. The table may be proportional. Each row may have the same width, and each column may have the same height. The width and height are calculated based on the colspan and/or rowspan attribute. When no colspan and/or rowspan attribute are specified for a cell it considered as the value 1. Each data cell may have an unique identity. Each data cell are represented by a combinaison of a minimum of one column heading cells without the colspan attribute or set to 1 AND a minimum of one row heading cells without the rowspan attribute or set to 1. Example 1 Head: A simple table with row grouping Example 1 Description: Example Code: <table> <caption>Example 1 - A simple table with row grouping</caption> <thead> <tr> <td></td> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <th>Row a</th> <td>1 a</td> <td>2 a</td> <td>3 a</td> </tr> <tr> <th>Row b</th> <td>1 b</td> <td>2 b</td> <td>3 b</td> </tr> <tr> <th>Row c</th> <td>1 c</td> <td>2 c</td> <td>3 c</td> </tr> </tbody> </table> Example 2 Head: A complex table with row grouping Example 2 Description: Example Code: <table> <caption>Example 1 - A complex table with row grouping</caption> <thead> <tr> <td rowspan="2" colspan="2"></td> <th colspan="2">Column 1</th> <th rowspan="2">Column 2</th> </tr> <tr> <th>Column 11</th> <th>Column 12</th> </tr> </thead> <tbody> <tr> <th rowspan="2">Row a</th> <th>Row aa</th> <td>11 aa</td> <td>12 aa</td> <td>2 aa</td> </tr> <tr> <th>Row ab</th> <td>11 ab</td> <td>12 ab</td> <td>2 ab</td> </tr> <tr> <th colspan="2">Row b</th> <td>11 b</td> <td>12 b</td> <td>2 b</td> </tr> </tbody> </table> Resource 1 Title: dev HTML5 - The thead element Resource 1 URI: http://dev.w3.org/html5/spec/Overview.html#the-thead-element Resource 2 Title: dev HTML5 - Header and data cell semantics Resource 2 URI: http://dev.w3.org/html5/spec/Overview.html#header-and-data-cell-semantics Related Techniques: G57 H39 H51 F46 Test Procedure: If thead and tbody element are present, 1. Check if all the cell heading in the thead section only represent column heading 2. Check if cell heading in the tbody are not represent column heading For each row 1. Check if their width are equal to each other row For each column 1. Check if their height are equal to each other column For each column in a thead 1. Check if one unique cell heading represent each column, this are not apply to the column equal to the with of the row heading in a tbody For each row in a tbody 1. Check if one unique cell heading exist, (row span value equal to one) Expected Result: * All check above are true. Test File 1: Faillure 1 - Column defined in a tbody section * Column heading are defined inside a tbody section <table> <caption>Faillure 1 - Column defined in a tbody section</caption> <thead> <tr> <td colspan="2"></td> <th colspan="2">Column 1</th> <th rowspan="2">Column 2</th> </tr> </thead> <tbody> <tr> <td colspan="2"></td> <th>Column 11</th> <th>Column 12</th> </tr> <tr> <th rowspan="2">Row a</th> <th>Row aa</th> <td>11 aa</td> <td>12 aa</td> <td>2 aa</td> </tr> <tr> <th>Row ab</th> <td>11 ab</td> <td>12 ab</td> <td>2 ab</td> </tr> <tr> <th colspan="2">Row b</th> <td>11 b</td> <td>12 b</td> <td>2 b</td> </tr> </tbody> </table> Test File 1 Pass/Fail: fail Test File 2: Faillure 2 - Not a proportional table * The last data cell of the first row in the tbody are offset in width * The last heading cell in the tbody are offset in height <table> <caption>Faillure 2 - Not a proportional table</caption> <thead> <tr> <td colspan="2"></td> <th colspan="2">Column 1</th> <th rowspan="2">Column 2</th> </tr> <tr> <td colspan="2"></td> <th>Column 11</th> <th>Column 12</th> </tr> </thead> <tbody> <tr> <th rowspan="2">Row a</th> <th>Row aa</th> <td>11 aa</td> <td>12 aa</td> <td>2 aa</td> <td>3 aa</td> </tr> <tr> <th>Row ab</th> <td>11 ab</td> <td>12 ab</td> <td>2 ab</td> </tr> <tr> <th colspan="2" rowspan="2">Row b</th> <td>11 b</td> <td>12 b</td> <td>2 b</td> </tr> </tbody> </table> Faillure 3 - Data cell have not unique identity * Each data cell in the column #4 and column #5 have not a unique identity <table> <caption>Faillure 1 - Column defined in a tbody section</caption> <thead> <tr> <td colspan="2"></td> <th colspan="3">Column 1</th> <th rowspan="2">Column 2</th> </tr> <tr> <td colspan="2"></td> <th>Column 11</th> <th colspan="2">Column 12</th> </tr> </thead> <tbody> <tr> <th rowspan="2">Row a</th> <th>Row aa</th> <td>11 aa</td> <td>12 aa</td> <td>13 aa</td> <td>2 aa</td> </tr> <tr> <th>Row ab</th> <td>11 ab</td> <td>12 ab</td> <td>13 ab</td> <td>2 ab</td> </tr> <tr> <th colspan="2">Row b</th> <td>11 b</td> <td>12 b</td> <td>13 b</td> <td>2 b</td> </tr> </tbody> </table> Test File 2 Pass/Fail: fail Additional Notes: Reltated information http://dev.w3.org/html5/spec/Overview.html#the-tbody-element I know I only added reference to the HTML5 specification under development, but I feel this technique can be applied to any XHTML and HTML webpage. This technique are sufficent as an alternative technique of ids/headers (H43) and scope (H63). The techniques H43 and H6 are not show how to use the row grouping. No guidelines reference was submitted! No UA issues were submitted! ------------------------------------------------ <technique id="UNKNOWN"> <short-name>Using table row grouping to associate data cells with header cells in data tables</short-name> <applies-to> <guideline idref="" /> <success-criterion idref="UNKNOWN" /> </applies-to> <applicability> Associate data cells with multiple headers by using the row grouping (thead element and one or more tbody element) </applicability> <ua_issues> </ua_issues> <description> The objective of this technique is to associate header cells with data cells in a simple or complex tables using the row grouping thead and tbody. The thead element may be used to identify all the column cell heading. The tbody element may be used to identify the data cell with a minimum of one cell heading per row. The table may be proportional. Each row may have the same width, and each column may have the same height. The width and height are calculated based on the colspan and/or rowspan attribute. When no colspan and/or rowspan attribute are specified for a cell it considered as the value 1. Each data cell may have an unique identity. Each data cell are represented by a combinaison of a minimum of one column heading cells without the colspan attribute or set to 1 AND a minimum of one row heading cells without the rowspan attribute or set to 1. </description> <examples> <ex_head_1> A simple table with row grouping </ex_head_1> <ex_desc_1> Example Code: <table> <caption>Example 1 - A simple table with row grouping</caption> <thead> <tr> <td></td> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <th>Row a</th> <td>1 a</td> <td>2 a</td> <td>3 a</td> </tr> <tr> <th>Row b</th> <td>1 b</td> <td>2 b</td> <td>3 b</td> </tr> <tr> <th>Row c</th> <td>1 c</td> <td>2 c</td> <td>3 c</td> </tr> </tbody> </table> </ex_desc_1> <ex_head_2> A complex table with row grouping </ex_head_2> <ex_desc_2> Example Code: <table> <caption>Example 1 - A complex table with row grouping</caption> <thead> <tr> <td rowspan="2" colspan="2"></td> <th colspan="2">Column 1</th> <th rowspan="2">Column 2</th> </tr> <tr> <th>Column 11</th> <th>Column 12</th> </tr> </thead> <tbody> <tr> <th rowspan="2">Row a</th> <th>Row aa</th> <td>11 aa</td> <td>12 aa</td> <td>2 aa</td> </tr> <tr> <th>Row ab</th> <td>11 ab</td> <td>12 ab</td> <td>2 ab</td> </tr> <tr> <th colspan="2">Row b</th> <td>11 b</td> <td>12 b</td> <td>2 b</td> </tr> </tbody> </table> </ex_desc_2> </examples> <resources> <resources_title1> dev HTML5 - The thead element </resources_title1> <resource_uri1> http://dev.w3.org/html5/spec/Overview.html#the-thead-element </resource_uri1> <resources_title2> dev HTML5 - Header and data cell semantics </resources_title2> <resource_uri2> http://dev.w3.org/html5/spec/Overview.html#header-and-data-cell-semantics </resource_uri2> </resources> <related_techniques> <related_technique> G57 </related_technique> <related_technique> H39 </related_technique> <related_technique> H51 </related_technique> <related_technique> F46 </related_technique> </related_techniques> <tests> <procedure> If thead and tbody element are present, 1. Check if all the cell heading in the thead section only represent column heading 2. Check if cell heading in the tbody are not represent column heading For each row 1. Check if their width are equal to each other row For each column 1. Check if their height are equal to each other column For each column in a thead 1. Check if one unique cell heading represent each column, this are not apply to the column equal to the with of the row heading in a tbody For each row in a tbody 1. Check if one unique cell heading exist, (row span value equal to one) </procedure> <expected_result> * All check above are true. </expected_result> <test_file_1> Faillure 1 - Column defined in a tbody section * Column heading are defined inside a tbody section <table> <caption>Faillure 1 - Column defined in a tbody section</caption> <thead> <tr> <td colspan="2"></td> <th colspan="2">Column 1</th> <th rowspan="2">Column 2</th> </tr> </thead> <tbody> <tr> <td colspan="2"></td> <th>Column 11</th> <th>Column 12</th> </tr> <tr> <th rowspan="2">Row a</th> <th>Row aa</th> <td>11 aa</td> <td>12 aa</td> <td>2 aa</td> </tr> <tr> <th>Row ab</th> <td>11 ab</td> <td>12 ab</td> <td>2 ab</td> </tr> <tr> <th colspan="2">Row b</th> <td>11 b</td> <td>12 b</td> <td>2 b</td> </tr> </tbody> </table> </test_file_1> <pass_fail_1> fail </pass_fail_1> <test_file_2> Faillure 2 - Not a proportional table * The last data cell of the first row in the tbody are offset in width * The last heading cell in the tbody are offset in height <table> <caption>Faillure 2 - Not a proportional table</caption> <thead> <tr> <td colspan="2"></td> <th colspan="2">Column 1</th> <th rowspan="2">Column 2</th> </tr> <tr> <td colspan="2"></td> <th>Column 11</th> <th>Column 12</th> </tr> </thead> <tbody> <tr> <th rowspan="2">Row a</th> <th>Row aa</th> <td>11 aa</td> <td>12 aa</td> <td>2 aa</td> <td>3 aa</td> </tr> <tr> <th>Row ab</th> <td>11 ab</td> <td>12 ab</td> <td>2 ab</td> </tr> <tr> <th colspan="2" rowspan="2">Row b</th> <td>11 b</td> <td>12 b</td> <td>2 b</td> </tr> </tbody> </table> Faillure 3 - Data cell have not unique identity * Each data cell in the column #4 and column #5 have not a unique identity <table> <caption>Faillure 1 - Column defined in a tbody section</caption> <thead> <tr> <td colspan="2"></td> <th colspan="3">Column 1</th> <th rowspan="2">Column 2</th> </tr> <tr> <td colspan="2"></td> <th>Column 11</th> <th colspan="2">Column 12</th> </tr> </thead> <tbody> <tr> <th rowspan="2">Row a</th> <th>Row aa</th> <td>11 aa</td> <td>12 aa</td> <td>13 aa</td> <td>2 aa</td> </tr> <tr> <th>Row ab</th> <td>11 ab</td> <td>12 ab</td> <td>13 ab</td> <td>2 ab</td> </tr> <tr> <th colspan="2">Row b</th> <td>11 b</td> <td>12 b</td> <td>13 b</td> <td>2 b</td> </tr> </tbody> </table> </test_file_2> <pass_fail_2> fail </pass_fail_2> </tests> </technique> Additional Notes: Reltated information http://dev.w3.org/html5/spec/Overview.html#the-tbody-element I know I only added reference to the HTML5 specification under development, but I feel this technique can be applied to any XHTML and HTML webpage. This technique are sufficent as an alternative technique of ids/headers (H43) and scope (H63). The techniques H43 and H6 are not show how to use the row grouping.
Received on Thursday, 26 January 2012 05:14:14 UTC