---
title: "Complex data table is missing ID and/or header attributes to associate headers with data cells"
date: "2026-04-01T06:05:18+00:00"
summary:
image:
type: "page"
url: "/web-governance/complex-data-table-missing-id-andor-header-attributes-associate-headers-data-cells"
id: "2267881f-eb3a-4539-9bcd-e695b84013c3"
---

        Table of contents will be added     

1.3.1 info and relationships

Introduction
------------

This document provides information about the related accessibility check:

*   Complex data table is missing ID and/or header attributes to associate headers with data cells
    

What
----

This check ensures that complex data tables use `id` and `header` attributes to explicitly link header cells with their corresponding data cells. In tables with multi-level headers or non-standard structures, these attributes are necessary to clarify the relationship between headers and data points.

Why
---

Without ID, header, or both attributes, screen readers might lose the relationship between a data cell and its multiple headers, which makes the information confusing or impossible to understand. 

Who
---

This check affects individuals with the following:

*   Visual impairments: Who rely on assistive technologies such as screen readers to navigate and interpret data
*   Cognitive disabilities: Who need the programmatic structure to build a mental map of the table
*   Any users: Who rely on assistive technologies

Examples
--------

This section provides a pass and fail example of this check.

### Pass example

The following table correctly uses unique `id` attributes on header cells and references them with the `headers` attribute in data cells.

    <table>
     <tr>
       <th id="h-region">Region</th>
       <th id="h-sales">Sales</th>
     </tr>
     <tr>
       <td headers="h-region">North</td>
       <td headers="h-sales">$10,000</td>
     </tr>
    </table>

### Fail example

The following table contains complex nested headers but lacks the `id` and `headers` attributes, which leaves the relationship between data and headers hard to distinguish for screen readers.

    <table>
     <tr>
       <th>Region</th>
       <th>Sales</th>
     </tr>
     <tr>
       <td>North</td>
       <td>$10,000</td>
     </tr>
    </table>

How
---

This section provides information on how to identify, review, and fix the failed check.

### How to identify it

Examine the page and identify any complex tables.

### How to review it

To review this error check, use the Web Governance Browser Extension to identify the element on the page or in the HTML source code. Check if the table has multiple layers of headers or cells that span multiple rows or columns. If it does, verify that each header cell (`<th>`) has a unique id and that each related data cell (`<td>`) has a `headers` attribute that contains the corresponding IDs.

For more information, visit [How to review an accessibility issue](/node/59486 "How to review an accessibility issue").

### How to fix it

*   Assign a unique id attribute to every header cell in the table.
*   For each data cell, add a `headers` attribute.
*   List the IDs of all headers that apply to that specific cell within the `headers` attribute, separated by spaces.
*   Ensure that the order of IDs in the headers attribute reflects the hierarchy of the table.

Additional resources
--------------------

*   WCAG Success Criterion 1.3.1 Info and Relationships: [https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)