Ensure that each cell in a table that uses the headers attribute refers only to other <th> elements in that table

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>