[public-wcag2-techs] <none>

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 ids/headers
Technique Category: HTML and XHTML Techniques
Success Criterion Reference: UNKNOWN

UA Issues:
Screen reader may have difficulties to associate hiarchical cell heading (th) with data cells when the row grouping method is used. The row grouping method are primilary designed for visual user agent and for printing purpose.

Description:
The objective of this technique is to associate each data cell (in a complex data table) with the appropriate headers. This technique is based on the HTML and XHTML Techniques - Using table row grouping to associate data cells with header cells in data tables (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0001.html).

This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells.

When the  HTML and XHTML Techniques - Using table row grouping to associate data cells with header cells in data tables (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0001.html) is followed, headers attribute for each data cell may have two or more ids, cell heading (th element) may have zero or more ids. 

The ids in the headers attribute may odered by the column header id(s) followed by the row header id(s).

When they are multiple data row group (tbody element) [see HTML and XHTML Techniques - Identifying data group (tbody) in a data table (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0002.html)] the ids in the data cell headers attribute may ordered by the column header id(s), followed by the row group header id and followed by the row header id(s).

Example 1 Head: A complex table with row grouping and ids/headers
Example 1 Description:
&lt;table&gt;
	&lt;caption&gt;Example 1 - A complex table with row grouping&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;td rowspan=&quot;2&quot; colspan=&quot;2&quot;&gt;&lt;/td&gt;
			&lt;th colspan=&quot;2&quot; id=&quot;table1col1&quot;&gt;Column 1&lt;/th&gt;
			&lt;th rowspan=&quot;2&quot; id=&quot;table1col2&quot;&gt;Column 2&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th id=&quot;table1col1a&quot; headers=&quot;table1col1&quot;&gt;Column 11&lt;/th&gt;
			&lt;th id=&quot;table1col1b&quot; headers=&quot;table1col1&quot;&gt;Column 12&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th rowspan=&quot;2&quot; id=&quot;table1row1&quot;&gt;Row a&lt;/th&gt;
			&lt;th id=&quot;table1row1a&quot; headers=&quot;table1row1&quot;&gt;Row aa&lt;/th&gt;
			&lt;td headers=&quot;table1col1 table1col1a table1row1 table1row1a&quot;&gt;11 aa&lt;/td&gt;
			&lt;td headers=&quot;table1col1 table1col1b table1row1 table1row1a&quot;&gt;12 aa&lt;/td&gt;
			&lt;td headers=&quot;table1col2 table1row1 table1row1a&quot;&gt;2 aa&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th id=&quot;table1row1b&quot; headers=&quot;table1row1&quot;&gt;Row ab&lt;/th&gt;
			&lt;td headers=&quot;table1col1 table1col1a table1row1 table1row1b&quot;&gt;11 ab&lt;/td&gt;
			&lt;td headers=&quot;table1col1 table1col1b table1row1 table1row1b&quot;&gt;12 ab&lt;/td&gt;
			&lt;td headers=&quot;table1col2 table1row1 table1row1b&quot;&gt;2 ab&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th colspan=&quot;2&quot; id=&quot;table1row2&quot;&gt;Row b&lt;/th&gt;
			&lt;td headers=&quot;table1col1 table1col1a table1row2&quot;&gt;11 b&lt;/td&gt;
			&lt;td headers=&quot;table1col1 table1col1b table1row2&quot;&gt;12 b&lt;/td&gt;
			&lt;td headers=&quot;table1col2 table1row2&quot;&gt;2 b&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;

Example 2 Head: Example 2 - Data group identified in a full row with ids/headers
Example 2 Description:
&lt;table&gt;
	&lt;caption&gt;Example 2 - Data group identified in a full row with ids/headers&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th id=&quot;table2col1&quot;&gt;Row group column header&lt;/th&gt;
			&lt;th id=&quot;table2col2&quot;&gt;Column 1&lt;/th&gt;
			&lt;th id=&quot;table2col3&quot;&gt;Column 2&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th colspan=&quot;3&quot; scope=&quot;rowgroup&quot; id=&quot;table2group1&quot; headers=&quot;table2col1&quot;&gt;Row Group 1&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th id=&quot;table2group1row1&quot; headers=&quot;table2col1 table2group1&quot;&gt;Row 1a&lt;/th&gt;
			&lt;td headers=&quot;table2col2 table2group1 table2group1row1&quot;&gt;1 1a&lt;/td&gt;
			&lt;td headers=&quot;table2col3 table2group1 table2group1row1&quot;&gt;1 1a&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th id=&quot;table2group1row2&quot; headers=&quot;table2col1 table2group1&quot;&gt;Row 1b&lt;/th&gt;
			&lt;td headers=&quot;table2col2 table2group1 table2group1row2&quot;&gt;1 1b&lt;/td&gt;
			&lt;td headers=&quot;table2col3 table2group1 table2group1row2&quot;&gt;2 1b&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;

	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th colspan=&quot;3&quot; scope=&quot;rowgroup&quot; id=&quot;table2group2&quot; headers=&quot;table2col1&quot;&gt;Row Group 2&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th id=&quot;table2group2row1&quot; headers=&quot;table2col1 table2group2&quot;&gt;Row 2a&lt;/th&gt;
			&lt;td headers=&quot;table2col2 table2group2 table2group2row1&quot;&gt;1 2a&lt;/td&gt;
			&lt;td headers=&quot;table2col3 table2group2 table2group2row1&quot;&gt;1 2a&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th id=&quot;table2group2row2&quot; headers=&quot;table2col1 table2group2&quot;&gt;Row 2b&lt;/th&gt;
			&lt;td headers=&quot;table2col2 table2group2 table2group2row2&quot;&gt;1 2b&lt;/td&gt;
			&lt;td headers=&quot;table2col3 table2group2 table2group2row2&quot;&gt;2 2b&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;

&lt;/table&gt;

Related Techniques:
G57
H39
H43
H51
H63
F46

Test Procedure:
1. Check that any cell that is associated with more than one row and/or one column header contains a headers attribute that lists the id for all headers associated with that cell.

2. For data tables where any cell contains an id or headers attribute,

 a. Check that each id listed in the headers attribute of the data cell matches the id attribute of a cell that is used as a header element

 b. Check that the headers attribute of a data cell contains the id attribute of all headers associated with the data cell

 c. Check that all ids are unique (that is, no two elements in the page have the same id)
 

Expected Result:
Checks #1, #2.a, #2.b and #2.c are true

Additional Notes:
This techniques is related to 2 previously submited techniques,

HTML and XHTML Techniques - Using table row grouping to associate data cells with header cells in data tables (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0001.html)
and
HTML and XHTML Techniques - Identifying data group (tbody) in a data table (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0002.html)

I feel this technique can be applied to any XHTML and HTML document.

No guidelines reference was submitted!
No applicability information 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 1 was submitted!
No test file 1 pass/fail was submitted!
No test file 2 was submitted!
No test file 2 pass/fail was submitted!


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

<technique id="UNKNOWN">
<short-name>Using table row grouping to associate data cells with ids/headers</short-name>
<applies-to>
<guideline idref="" />
<success-criterion idref="UNKNOWN" />
</applies-to>

<applicability>

</applicability>
<ua_issues>
Screen reader may have difficulties to associate hiarchical cell heading (th) with data cells when the row grouping method is used. The row grouping method are primilary designed for visual user agent and for printing purpose.
</ua_issues>
<description>
The objective of this technique is to associate each data cell (in a complex data table) with the appropriate headers. This technique is based on the HTML and XHTML Techniques - Using table row grouping to associate data cells with header cells in data tables (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0001.html).

This technique adds a headers attribute to each data cell (td element). It also adds an id attribute to any cell used as a header for other cells. The headers attribute of a cell contains a list of the id attributes of the associated header cells.

When the  HTML and XHTML Techniques - Using table row grouping to associate data cells with header cells in data tables (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0001.html) is followed, headers attribute for each data cell may have two or more ids, cell heading (th element) may have zero or more ids. 

The ids in the headers attribute may odered by the column header id(s) followed by the row header id(s).

When they are multiple data row group (tbody element) [see HTML and XHTML Techniques - Identifying data group (tbody) in a data table (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0002.html)] the ids in the data cell headers attribute may ordered by the column header id(s), followed by the row group header id and followed by the row header id(s).
</description>

<examples>
<ex_head_1>
A complex table with row grouping and ids/headers
</ex_head_1>
<ex_desc_1>
<table>
	<caption>Example 1 - A complex table with row grouping</caption>
	<thead>
		<tr>
			<td rowspan=&quot;2&quot; colspan=&quot;2&quot;></td>
			<th colspan=&quot;2&quot; id=&quot;table1col1&quot;>Column 1</th>
			<th rowspan=&quot;2&quot; id=&quot;table1col2&quot;>Column 2</th>
		</tr>
		<tr>
			<th id=&quot;table1col1a&quot; headers=&quot;table1col1&quot;>Column 11</th>
			<th id=&quot;table1col1b&quot; headers=&quot;table1col1&quot;>Column 12</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th rowspan=&quot;2&quot; id=&quot;table1row1&quot;>Row a</th>
			<th id=&quot;table1row1a&quot; headers=&quot;table1row1&quot;>Row aa</th>
			<td headers=&quot;table1col1 table1col1a table1row1 table1row1a&quot;>11 aa</td>
			<td headers=&quot;table1col1 table1col1b table1row1 table1row1a&quot;>12 aa</td>
			<td headers=&quot;table1col2 table1row1 table1row1a&quot;>2 aa</td>
		</tr>
		<tr>
			<th id=&quot;table1row1b&quot; headers=&quot;table1row1&quot;>Row ab</th>
			<td headers=&quot;table1col1 table1col1a table1row1 table1row1b&quot;>11 ab</td>
			<td headers=&quot;table1col1 table1col1b table1row1 table1row1b&quot;>12 ab</td>
			<td headers=&quot;table1col2 table1row1 table1row1b&quot;>2 ab</td>
		</tr>
		<tr>
			<th colspan=&quot;2&quot; id=&quot;table1row2&quot;>Row b</th>
			<td headers=&quot;table1col1 table1col1a table1row2&quot;>11 b</td>
			<td headers=&quot;table1col1 table1col1b table1row2&quot;>12 b</td>
			<td headers=&quot;table1col2 table1row2&quot;>2 b</td>
		</tr>
	</tbody>
</table>
</ex_desc_1>
<ex_head_2>
Example 2 - Data group identified in a full row with ids/headers
</ex_head_2>
<ex_desc_2>
<table>
	<caption>Example 2 - Data group identified in a full row with ids/headers</caption>
	<thead>
		<tr>
			<th id=&quot;table2col1&quot;>Row group column header</th>
			<th id=&quot;table2col2&quot;>Column 1</th>
			<th id=&quot;table2col3&quot;>Column 2</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan=&quot;3&quot; scope=&quot;rowgroup&quot; id=&quot;table2group1&quot; headers=&quot;table2col1&quot;>Row Group 1</th>
		</tr>
		<tr>
			<th id=&quot;table2group1row1&quot; headers=&quot;table2col1 table2group1&quot;>Row 1a</th>
			<td headers=&quot;table2col2 table2group1 table2group1row1&quot;>1 1a</td>
			<td headers=&quot;table2col3 table2group1 table2group1row1&quot;>1 1a</td>
		</tr>
		<tr>
			<th id=&quot;table2group1row2&quot; headers=&quot;table2col1 table2group1&quot;>Row 1b</th>
			<td headers=&quot;table2col2 table2group1 table2group1row2&quot;>1 1b</td>
			<td headers=&quot;table2col3 table2group1 table2group1row2&quot;>2 1b</td>
		</tr>
	</tbody>

	<tbody>
		<tr>
			<th colspan=&quot;3&quot; scope=&quot;rowgroup&quot; id=&quot;table2group2&quot; headers=&quot;table2col1&quot;>Row Group 2</th>
		</tr>
		<tr>
			<th id=&quot;table2group2row1&quot; headers=&quot;table2col1 table2group2&quot;>Row 2a</th>
			<td headers=&quot;table2col2 table2group2 table2group2row1&quot;>1 2a</td>
			<td headers=&quot;table2col3 table2group2 table2group2row1&quot;>1 2a</td>
		</tr>
		<tr>
			<th id=&quot;table2group2row2&quot; headers=&quot;table2col1 table2group2&quot;>Row 2b</th>
			<td headers=&quot;table2col2 table2group2 table2group2row2&quot;>1 2b</td>
			<td headers=&quot;table2col3 table2group2 table2group2row2&quot;>2 2b</td>
		</tr>
	</tbody>

</table>
</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>
G57
</related_technique>
<related_technique>
H39
</related_technique>
<related_technique>
H43
</related_technique>
<related_technique>
H51
</related_technique>
<related_technique>
H63
</related_technique>
<related_technique>
F46
</related_technique>
</related_techniques>

<tests>
<procedure>
1. Check that any cell that is associated with more than one row and/or one column header contains a headers attribute that lists the id for all headers associated with that cell.

2. For data tables where any cell contains an id or headers attribute,

 a. Check that each id listed in the headers attribute of the data cell matches the id attribute of a cell that is used as a header element

 b. Check that the headers attribute of a data cell contains the id attribute of all headers associated with the data cell

 c. Check that all ids are unique (that is, no two elements in the page have the same id)
 
</procedure>
<expected_result>
Checks #1, #2.a, #2.b and #2.c are true
</expected_result>
<test_file_1>

</test_file_1>
<pass_fail_1>

</pass_fail_1>
<test_file_2>

</test_file_2>
<pass_fail_2>

</pass_fail_2>
</tests>

</technique>

Additional Notes:

This techniques is related to 2 previously submited techniques,

HTML and XHTML Techniques - Using table row grouping to associate data cells with header cells in data tables (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0001.html)
and
HTML and XHTML Techniques - Identifying data group (tbody) in a data table (http://lists.w3.org/Archives/Public/public-wcag2-techs/2012Jan/0002.html)

I feel this technique can be applied to any XHTML and HTML document.

Received on Tuesday, 31 January 2012 01:48:10 UTC