Techniques for WCAG 2.0

On this page:

-

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

## Applicability

HTML and XHTML

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

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

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

Resources are for information purposes only, no endorsement implied.

- HTML 4.01 header information with data cells

## Related Techniques

- H39: Using caption elements to associate data table captions with data tables
- H51: Using table markup to present tabular information
- H63: Using the scope attribute to associate header cells and data cells in data tables
- H73: Using the summary attribute of the table element to give an overview of data tables

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

- Top
- Contents
- Intro
- Previous: Technique H42
- Next: Technique H44