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

Layout-Only Table Wrongly Coded With Real Header Cells

1.3.1 — Info and Relationships

Scenario

Setting

An online marketplace's seller dashboard

What’s wrong

A table used purely for visual layout contains header cells or a caption — screen readers treat it as a data table and announce meaningless headers.

Example 

<table>
  <caption>Dashboard layout</caption>
  <tr><th>Logo</th><th>Stats</th></tr>
  <tr><td><img src="logo.png" alt="Shop logo"></td><td>Orders: 12</td></tr>
</table>

Why it matters

A seller using a screen reader hears "table, Logo, Stats" before every row, even though the table only arranges page layout.

How to test

Check a layout-only table (used for visual positioning) in DevTools: if it has th, caption, or summary, a screen reader misreads it as a real data table.

How to fix

A layout table should carry no caption or header cells; if it needs real headers, it's actual data and deserves a proper table.

<div class="dashboard-layout">
  <img src="logo.png" alt="Shop logo">
  <p>Orders: 12</p>
</div>

Outcome

A seller hears the logo and order count read plainly, with no phantom table announcement in the way.

Who is affected

Screen reader users browsing the seller dashboard get false table navigation prompts for what is really a layout wrapper.

Learn more

Related scenarios