Skip to content

Technique H43:Using id and headers attributes to associate data cells with header cells in data tables

About this Technique

This technique relates to 1.3.1: Info and Relationships (Sufficient when used for making information and relationships conveyed through presentation programmatically determinable).

This technique applies to HTML.

Description

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.

Examples

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>

Related Resources

No endorsement implied.

Tests

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 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.

  3. For data tables where any cell contains an id or headers attribute:

    1. 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.
    2. Check that the headers attribute of a data cell contains the id attribute of all headers associated with the data cell.
    3. Check that all ids are unique (that is, no two elements in the page have the same id).

Expected Results

  • 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.1, #3.2, and #3.3 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.

Test Rules

The following are Test Rules related to this Technique. It is not necessary to use these particular Test Rules to check for conformance with WCAG, but they are defined and approved test methods. For information on using Test Rules, see Understanding Test Rules for WCAG Success Criteria.

Back to Top