---
title: Table headers Attribute Valid | Accessibility Rule
description: Table cells that use the headers attribute can only refer to cells in
  the same table
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/td-headers-attr
  md: https://testingbot.com/support/accessibility/web/rules/td-headers-attr/index.md
---
# Ensure that each cell in a table that uses the headers attribute refers only to other \<th\> elements in that table

Rule ID: td-headers-attrUser Impact: seriousGuidelines: WCAG 2.0

In data tables, the `headers` attribute associates data cells (`<td>`) with their corresponding header cells (`<th>`). It's essential that each `headers` attribute references only other cells within the same table to maintain proper accessibility and semantic structure.

## About This Rule

This guideline ensures that each cell in a table using the `headers` attribute refers only to other cells within the same table, enhancing accessibility for users who rely on assistive technologies. Adhering to this practice aligns with the following standards:

- WCAG 2.1 (A): 1.3.1 Info and Relationships
- WCAG 2.0 (A): 1.3.1 Info and Relationships
- WCAG 2.2 (A): 1.3.1 Info and Relationships
- Section 508: 1194.22(g) - Row and column headers shall be identified for data tables.
- Trusted Tester: 14.B - All data cells are programmatically associated with relevant headers.
- EN 301 549: 9.1.3.1 Info and Relationships

## Why It Matters

Associating data cells with their respective headers allows assistive technologies, such as screen readers, to convey the relationship between data and headers effectively. Incorrect references, especially those pointing to cells outside the current table, can confuse users and disrupt the logical flow of information. This practice aligns with WCAG Success Criterion 1.3.1: Info and Relationships. ([dequeuniversity.com](https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=RuleDescription&utm\_source=chatgpt.com))

## How to Fix

To ensure proper associations:

- **Assign Unique `id` Attributes to Header Cells:** Each `<th>` element should have a unique `id` within the table. 

    <table>
      <thead>
        <tr>
          <th id="name">Name</th>
          <th id="mile1">1 Mile</th>
          <th id="km5">5 km</th>
          <th id="km10">10 km</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="mary">Mary</th>
          <td headers="mary mile1">8:32</td>
          <td headers="mary km5">28:04</td>
          <td headers="mary km10">1:01:16</td>
        </tr>
        <!-- Additional rows -->
      </tbody>
    </table>

- **Use the `headers` Attribute in Data Cells:** Each `<td>` should include a `headers` attribute listing the `id`(s) of its associated `<th>` elements. 

    <td headers="mary mile1">8:32</td>

- **Ensure All References Are Internal:** Verify that the `headers` attribute in each `<td>` references only `<th>` elements within the same table. 

### Examples

#### Incorrect

A data cell referencing a header cell outside its table:

    <table>
      <!-- Table structure -->
      <tbody>
        <tr>
          <td headers="external-header">Data</td>
        </tr>
      </tbody>
    </table>

#### Correct

A data cell correctly referencing header cells within its table:

    <table>
      <thead>
        <tr>
          <th id="name">Name</th>
          <th id="mile1">1 Mile</th>
          <th id="km5">5 km</th>
          <th id="km10">10 km</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="mary">Mary</th>
          <td headers="mary mile1">8:32</td>
          <td headers="mary km5">28:04</td>
          <td headers="mary km10">1:01:16</td>
        </tr>
        <!-- Additional rows -->
      </tbody>
    </table>

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [th-has-data-cells](https://testingbot.com/support/accessibility/web/rules/th-has-data-cells)
- [valid-lang](https://testingbot.com/support/accessibility/web/rules/valid-lang)
- [video-caption](https://testingbot.com/support/accessibility/web/rules/video-caption)
- [autocomplete-valid](https://testingbot.com/support/accessibility/web/rules/autocomplete-valid)
- [avoid-inline-spacing](https://testingbot.com/support/accessibility/web/rules/avoid-inline-spacing)