How to fix: data table without headers

What it looks like in the wild

Screen readers announce table cells with no column or row context.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Without scope, AT cannot announce the related header for each cell.

The wrong pattern (avoid)

<table><tr><td>Name</td><td>Plan</td></tr><tr><td>Acme</td><td>Pro</td></tr></table>

The right pattern (copy this)

<table>
  <thead><tr><th scope="col">Name</th><th scope="col">Plan</th></tr></thead>
  <tbody><tr><th scope="row">Acme</th><td>Pro</td></tr></tbody>
</table>

Notes from real audits

• Avoid using <table> for layout. Use CSS Grid or Flexbox.

Related fixes