Back to Learn
Pulseaccessibility

Table Cells Reference Headers in Same Table

What This Audit Checks

This audit verifies that when a <td> element uses a headers attribute, every ID listed in that attribute corresponds to a <th> element within the same <table>. References to nonexistent or out-of-table headers are invalid.

Why It Matters

The headers attribute explicitly associates data cells with their column or row headers for screen readers. Broken references cause assistive technologies to announce incorrect or no header context, making complex tables incomprehensible.

How to Fix It

  • Verify every ID in the headers attribute exists as an id on a <th> in the same table. Typos are the most common cause.
  • Remove stale references. If you deleted or renamed a <th>, update all <td> elements that pointed to its old ID.
  • Use scope instead for simple tables. The scope attribute on <th> is easier to maintain and sufficient for most layouts.
<!-- Bad: "qty" does not match any th id -->
<table>
  <tr>
    <th id="product">Product</th>
    <th id="quantity">Quantity</th>
  </tr>
  <tr>
    <td headers="product">Widget</td>
    <td headers="qty">10</td>
  </tr>
</table>

<!-- Good: headers match th ids -->
<table>
  <tr>
    <th id="product">Product</th>
    <th id="quantity">Quantity</th>
  </tr>
  <tr>
    <td headers="product">Widget</td>
    <td headers="quantity">10</td>
  </tr>
</table>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources