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
| 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
| 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
| 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
| 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
- HTML Table Validator (With ids/headers/aria-describedby auto assignation)
- About the Table Usability Concept
- Extended definition of HTML5 table elements
- All the resources
Related Techniques
- H51: Using table markup to present tabular information
- H39: Using caption elements to associate data table captions with data tables
- H73: Using the summary attribute of the table element to give an overview of data tables
- H63: Using the scope attribute to associate header cells and data cells in data tables
- H43: Using id and headers attributes to associate data cells with header cells in data tables
- H79: Identifying the purpose of a link using link text combined with its enclosing table cell and associated table headings
- F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content
- F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
- F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
- G57: Ordering the content in a meaningful sequence
Test
Procedure
- Table have a row group cell header
- 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
| 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
| 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>- Date modified: