Cells using headers attribute must reference cells in the same table

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If a <td> uses `headers`, each value must match a real <th id> in the same table.

Why this matters and how to fix it

Why this matters

Screen readers use the `headers` attribute on <td> to announce which header cells apply to that data cell. If the `headers` value points to an ID that does not exist, or references a <th> in another table, users hear values with no context, making the table confusing or unusable.

How to fix this issue

Ensure every <td headers="..."> references a real <th id="..."></th> in the same <table>. For simple tables (one row of column headers or one column of row headers), prefer using <th scope="col"> or <th scope="row"> instead of managing `headers`/`id` pairs manually.

Automated detection · Manual review recommended

Developer guidance

This aligns with GetWCAG checks that flag when `headers` values do not correctly map to <th> IDs. In React or other component frameworks, generate <th id> and matching `headers` programmatically to avoid mismatches. For simple tables, avoid `headers` entirely and use `scope` for clarity.

Code examples

Incorrect Implementation

<table><tr><td headers="x">Alice</td></tr></table>

Correct Implementation

<table>
  <tr><th id="name">Name</th></tr>
  <tr><td headers="name">Alice</td></tr>
</table>

Real-World Examples

Before

<table><tr><td headers="customer-name">John</td><td headers="order-total">$120</td></tr></table> <!-- No <th id="customer-name"> or <th id="order-total"> defined anywhere -->

After

<table>
  <tr><th id="customer-name">Customer</th><th id="order-total">Total</th></tr>
  <tr><td headers="customer-name">John</td><td headers="order-total">$120</td></tr>
</table>

CSS Example (Guidance)

/* Style table headers and associated data cells */
th {
  font-weight: 600;
  background-color: #f9fafb;
  padding: 8px;
}
td {
  padding: 8px;
  border-top: 1px solid #e5e7eb;
}

Manual testing

  1. 1. Inspect the table in browser dev tools.
  2. 2. Select all <td> elements with a `headers` attribute.
  3. 3. For each value in `headers`, confirm a <th> exists with a matching `id` in the same <table>.
  4. 4. Verify that the referenced <th> elements are intended headers (not data cells styled to look bold).
  5. 5. If the table only has one header row or one header column, check if `scope` could replace `headers` for simpler markup.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance