Defining a Key Cell - HTML Tables Techniques
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
Defining Key Cell in a Table
Applicability
Use for data tables when presence of a key information related to a row cell header.
User Agent Issues
Not Available
Description of Technique
The objective of this technique is to distinguish / separate a ID information from his header. This is only applicable to row defined in a table.
The ID information is defined to "Key Cell" term
A key cell is a data cell "td element" defined at the left side of a cell header "th element" for a givin row. When a key cell is present in a table, the column use as that meaning can not cross over with a cell header used to identify a row. However the group cell header used to define a row group can cross-over the key cell column.
A row can have multiple key cell but the key cell must have the same width (rowspan) and height (colspan).
Examples
The table sample was taken from the HTML5 Draft Specification - 4.9.10 The th element. Please note the original version was altered about the context of each example.
A Simple Table With Key Cell
| ID | Measurement | Average | Maximum |
|---|---|---|---|
| 93 | Legs | 3.5 | 4 |
| 10 | Tails | 1 | 1 |
| 32 | Legs | 2.67 | 4 |
| 35 | Tails | 0.33 | 1 |
Table Source Code
<table>
<tr>
<th>ID</th>
<th>Measurement</th>
<th>Average</th>
<th>Maximum</th>
</tr>
<tr>
<td>93</td>
<th>Legs</th>
<td>3.5</td>
<td>4</td>
</tr>
<tr>
<td>10</td>
<th>Tails</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>32</td>
<th>Legs</th>
<td>2.67</td>
<td>4</td>
</tr>
<tr>
<td>35</td>
<th>Tails</th>
<td>0.33</td>
<td>1</td>
</tr>
</table>A Row Grouped Table With Key Cell
| ID | Measurement | Average | Maximum |
|---|---|---|---|
| Cats | |||
| 93 | Legs | 3.5 | 4 |
| 10 | Tails | 1 | 1 |
| English speakers | |||
| 32 | Legs | 2.67 | 4 |
| 35 | Tails | 0.33 | 1 |
Table Source Code
<table>
<thead>
<tr>
<th>ID</th>
<th>Measurement</th>
<th>Average</th>
<th>Maximum</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="4">Cats</th>
</tr>
<tr>
<td>93</td>
<th>Legs</th>
<td>3.5</td>
<td>4</td>
</tr>
<tr>
<td>10</td>
<th>Tails</th>
<td>1</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="4">English speakers</th>
</tr>
<tr>
<td>32</td>
<th>Legs</th>
<td>2.67</td>
<td>4</td>
</tr>
<tr>
<td>35</td>
<th>Tails</th>
<td>0.33</td>
<td>1</td>
</tr>
</tbody>
</table>Multiple Key cell per Row
| ID | Measurement | Average | Maximum | ||
|---|---|---|---|---|---|
| Group A | 93 | Cats | Legs | 3.5 | 4 |
| 10 | Tails | 1 | 1 | ||
| Group B | 32 | English speakers | Legs | 2.67 | 4 |
| 35 | Tails | 0.33 | 1 | ||
Table Source Code
<table>
<tr>
<th colspan="2">ID</th>
<th colspan="2">Measurement</th>
<th>Average</th>
<th>Maximum</th>
</tr>
<tr>
<td rowspan="2">Group A</td>
<td>93</td>
<th rowspan="2">Cats</th>
<th>Legs</th>
<td>3.5</td>
<td>4</td>
</tr>
<tr>
<td>10</td>
<th>Tails</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">Group B</td>
<td>32</td>
<th rowspan="2">English speakers</th>
<th>Legs</th>
<td>2.67</td>
<td>4</td>
</tr>
<tr>
<td>35</td>
<th>Tails</th>
<td>0.33</td>
<td>1</td>
</tr>
</table>Multiple Key Cell per Row with cell heading between
| Group | Measurement | Average | Maximum | ||
|---|---|---|---|---|---|
| Group A | Cats | 93 | Legs | 3.5 | 4 |
| 10 | Tails | 1 | 1 | ||
| Group B | English speakers | 32 | Legs | 2.67 | 4 |
| 35 | Tails | 0.33 | 1 | ||
Table Source Code
<table>
<tr>
<th colspan="2">Group</th>
<th colspan="2">Measurement</th>
<th>Average</th>
<th>Maximum</th>
</tr>
<tr>
<td rowspan="2">Group A</td>
<th rowspan="2">Cats</th>
<td>93</td>
<th>Legs</th>
<td>3.5</td>
<td>4</td>
</tr>
<tr>
<td>10</td>
<th>Tails</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">Group B</td>
<th rowspan="2">English speakers</th>
<td>32</td>
<th>Legs</th>
<td>2.67</td>
<td>4</td>
</tr>
<tr>
<td>35</td>
<th>Tails</th>
<td>0.33</td>
<td>1</td>
</tr>
</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
- Check for layout tables: determine whether the content has a relationship with other content in both its column and its row. If "no," the table is a layout table. If "yes," the table is a data table.
- For data tables, check any row, except the row defined in the "thead" row group, where a data cell exist at the left of an cell heading ("th"
- Check if the data cell contain key information
- Check if the key cell have the same dimension of the cell heading associated to
- Check if the key cell is positioned at left side of the proper cell heading
- Check if the cell heading contain key information
Expected Result
- If table is a data table with key cell, #2.a, #2.b, #2.c are true and #2.d is false
Test File 1
This Test File 1 fail this technique
| Measurement | Average | Maximum |
|---|---|---|
| 93 - Legs | 3.5 | 4 |
| 10 - Tails | 1 | 1 |
| 32 - Legs | 2.67 | 4 |
| 35 - Tails | 0.33 | 1 |
Table Source Code
<table>
<tr>
<th>Measurement</th>
<th>Average</th>
<th>Maximum</th>
</tr>
<tr>
<th>93 - Legs</th>
<td>3.5</td>
<td>4</td>
</tr>
<tr>
<th>10 - Tails</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>32 - Legs</th>
<td>2.67</td>
<td>4</td>
</tr>
<tr>
<th>35 - Tails</th>
<td>0.33</td>
<td>1</td>
</tr>
</table>Test File 2
This Test File 2 fail this technique
| ID | Measurement | Average | Maximum |
|---|---|---|---|
| Group A | Legs | 3.5 | 4 |
| Tails | 1 | 1 | |
| Group B | Legs | 2.67 | 4 |
| Tails | 0.33 | 1 |
Table Source Code
<table>
<tr>
<th>ID</th>
<th>Measurement</th>
<th>Average</th>
<th>Maximum</th>
</tr>
<tr>
<td rowspan="2">Group A</td>
<th>Legs</th>
<td>3.5</td>
<td>4</td>
</tr>
<tr>
<th>Tails</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">Group B</td>
<th>Legs</th>
<td>2.67</td>
<td>4</td>
</tr>
<tr>
<th>Tails</th>
<td>0.33</td>
<td>1</td>
</tr>
</table>- Date modified: