Defining a Key Cell - HTML Tables Techniques - 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

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

Related Techniques

Test

Procedure

  1. 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.
  2. 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"
    1. Check if the data cell contain key information
    2. Check if the key cell have the same dimension of the cell heading associated to
    4. Check if the key cell is positioned at left side of the proper cell heading
    6. 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>