• Success Criterion 1.3.1
  • Conformance level A
  • W3C reference F90

Table Cells Linked to the Wrong Header Cells

1.3.1 — Info and Relationships

Scenario

Setting

A community forum's discussion thread

What’s wrong

Table cells point to the wrong header cells (broken headers/id links (code linking data cells to their headers) wiring) — screen readers read incorrect column/row names for the data.

Example 

<table>
  <tr><th id="h-replies">Replies</th><th id="h-views">Views</th></tr>
  <tr><td headers="h-views">42</td><td headers="h-replies">1,203</td></tr>
</table>

Why it matters

A forum member using a screen reader hears "42, Views," but 42 is really the reply count. That gives them the wrong picture of the thread.

How to test

Click into a data cell and check its headers attribute (or use NVDA/JAWS table navigation, Ctrl+Alt+arrows): if it announces the wrong column/row header, it fails.

How to fix

Each headers attribute must list the id of its own true column header, not a neighboring one.

<table>
  <tr><th id="h-replies">Replies</th><th id="h-views">Views</th></tr>
  <tr><td headers="h-replies">42</td><td headers="h-views">1,203</td></tr>
</table>

Outcome

A forum member hears the reply count and view count matched correctly to their real columns.

Who is affected

Screen reader users checking thread stats hear column names swapped with the data they describe.

Learn more

Related scenarios