Section 508, 1194.22(g)
Skip Quick Links
Quick Links:
“Row and column headers shall be identified for data tables.”
WCAG 1.0 Checkpoint: 5.1
Explanation
In other words, associate data cells with their corresponding row and column labels clearly by using the "headers" attribute to specify a list of header cells (row and column labels) associated with the current data cell. This requires each header cell to have an "id" attribute.
Example
<table class="myTable"
summary="This table charts the number of
cups of coffee consumed by each senator,
the type of coffee (decaf or regular),
and whether taken with sugar.">
<caption>Cups of coffee consumed by
each senator</caption>
<tr>
<th id="name">Name</th>
<th id="cups">Cups</th>
<th id="type" abbr="Type">Type of Coffee</th>
<th id="sugar">Sugar?</th>
</tr>
<tr>
<td headers="name">T. Sexton</td>
<td headers="cups">10</td>
<td headers="type">Espresso</td>
<td headers="sugar">No</td>
</tr>
<tr>
<td headers="name">J. Dinnen</td>
<td headers="cups">5</td>
<td headers="type">Decaf</td>
<td headers="sugar">Yes</td>
</tr>
</table>
| Name | Cups | Type of Coffee | Sugar? |
|---|---|---|---|
| T. Sexton | 10 | Espresso | No |
| J. Dinnen | 5 | Decaf | Yes |
Reference
Core Techniques for Web Content Accessibility Guidelines 1.0: http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns
