HTML and XHTML
This technique relates to:
The objective of this technique is to associate each data cell (in a data table) with
the appropriate headers. This technique adds a headers attribute to each
data cell (td element). It also adds an id attribute to any
cell used as a header for other cells. The headers attribute of a cell
contains a list of the id attributes of the associated header cells. If
there is more than one id, they are separated by spaces.
This technique is used when data cells are associated with more than one row and/or one
column header. This allows screen readers to speak the headers associated with each data
cell when the relationships are too complex to be identified using the th
element alone or the th element with the scope attribute.
Using this technique also makes these complex relationships perceivable when the
presentation format changes.
This technique is not recommended for layout tables since its use implies a relationship between cells that is not meaningful when tables are used for layout.
Example Code:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>Resources are for information purposes only, no endorsement implied.
HTML 4.01 header information with data cells
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 that any cell that is associated with more than one row
and/or one column header contains a headers attribute that lists the
id for all headers associated with that cell.
For data tables where any cell contains an id or
headers attribute,
Check that each id listed in the headers attribute
of the data cell matches the id attribute of a cell that is used
as a header element
Check that the headers attribute of a data cell contains the
id attribute of all headers associated with the data cell
Check that all ids are unique (that is, no two elements in the page have the same id)
If table is a layout table, no cells contain headers or
id attributes
If table is a data table and any cell contains an id attribute,
checks #3.a, #3.b, and #3.c are true.
If table is a data table and any cell is associated with more than one row and/or one column header, check #2 is true.
If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.
Techniques are informative—that means they are not required. The basis for determining conformance to WCAG 2.0 is the success criteria from the WCAG 2.0 standard—not the techniques. For important information about techniques, please see the Understanding Techniques for WCAG Success Criteria section of Understanding WCAG 2.0.