HTML and XHTML
This technique relates to Success Criterion 1.3.1: Info and Relationships (Sufficient as a way to meet an unwritten technique).
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
column header. This allows screen readers to speak the headers associated with each
cell when the relationships are too complex to be identified using the
element alone or the
th element with the
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 1: A table with multiple rows of headers
<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
headersattribute that lists the
idfor all headers associated with that cell.
For data tables where any cell contains an
- Check that each
idlisted in the
headersattribute of the data cell matches the
idattribute of a cell that is used as a header element
- Check that the
headersattribute of a data cell contains the
idattribute 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)
- Check that each
- If table is a layout table, no cells contain
- If table is a data table and any cell contains an
idattribute, 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.