Describing a Row Group Header Cell in a Data Table - Web Experience Toolkit (WET)

Note: Table Source Code Example

Id/Headers attribute, colgroup element and col element was omited intentionally for clarity.

The format used for this technique is similar to the WCAG 2.0 Techniques

Technique Author

Name: Pierre Dubois

Technique Information

Technology

HTML and XHTML Techniques

Guidelines Reference

Success Criterion 1.3.1 (Info and Relationships)

Technique Title

Describing a Row Group Header Cell in a Data Table

Applicability

Use for data tables with a row group cell header.

User Agent Issues

Not Available

Description of Technique

The objective of this technique is to associate a description to a row group cell header.

As the row group cell header is maintained in a unique row, their descriptive cell is also maintained in a unique row next to it.

A data cell element (td) is used to represent the description

Examples

Table 1

Table 1
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Group A
Description of Group A
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group B
Description of Group B
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Table Source Code
<table class="wet-boew-zebra">
	<caption>Table 1</caption>
	<colgroup>
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<td colspan="8">Description of Group A</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group B</th>
		</tr>
		<tr>
			<td colspan="8">Description of Group B</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>

Table 2

Table 2
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group A
Description of Group A
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Table Source Code
<table>
	<caption>Table 2</caption>
	<colgroup>
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<td id="tbla74">Description of Group A</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>

Table 3

Table 3
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Group A
Description of Group A
Group B
Description of Group B
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group C
Description of Group C
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Table Source Code
<table class="wet-boew-zebra">
	<caption>Table 3</caption>
	<colgroup>
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<td colspan="8">Description of Group A</td>
		</tr>
		<tr>
			<th colspan="8">Group B</th>
		</tr>
		<tr>
			<td colspan="8">Description of Group B</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group C</th>
		</tr>
		<tr>
			<td colspan="8">Description of Group C</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>

Table 4

Table 4
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Group A
Description of Group A
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group B
Description of Group B
Group C
Description of Group C
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Group D
Description of Group D
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Table Source Code
<table class="wet-boew-zebra">
	<caption>Table 4</caption>
	<colgroup>
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<td colspan="8">Description of Group A</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group B</th>
		</tr>
		<tr>
			<td colspan="8">Description of Group B</td>
		</tr>
		<tr>
			<th colspan="8">Group C</th>
		</tr>
		<tr>
			<td colspan="8">Description of Group C</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th colspan="8">Group D</th>
		</tr>
		<tr>
			<td colspan="8">Description of Group D</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>

Resources

Related Techniques

Test

Procedure

  1. Table have a row group cell header
  2. The next row following the row group cell header contain only one cell column spanned the table width

Expected Result

  • #1 and #2 are true

Test File 1

This Test File 1 fail this technique

Table 5
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Group A
Row Heading Data Data Data Data Data Data Data
Description of Group A
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Table Source Code
<table class="wet-boew-zebra">
	<caption>Table 5</caption>
	<colgroup>
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan="8">Group A</th>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<td colspan="8">Description of Group A</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>

Test File 2

This Test File 2 fail this technique

Table 6
Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading Col Heading
Group A Description of Group A
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Row Heading Data Data Data Data Data Data Data
Table Source Code
<table class="wet-boew-zebra">
	<caption>Table 6</caption>
	<colgroup>
		<col />
	</colgroup>
	<colgroup>
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
		<col />
	</colgroup>
	<thead>
		<tr>
			<th></th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
			<th>Col Heading</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th colspan="6">Group A</th>
			<td colspan="2">Description of Group A</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
		<tr>
			<th>Row Heading</th>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
			<td>Data</td>
		</tr>
	</tbody>
</table>