- 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
On an online marketplace's seller dashboard, a visitor hits this wall: 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.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. On an online marketplace's seller dashboard, this barrier means they lose track of what belongs to what.
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
Strip th/caption/summary from layout tables (or use CSS layout instead of tables).
Outcome
Corrected, an online marketplace's seller dashboard now lets a visitor move through the content with confidence.
Who is affected
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.
Learn more
- Understanding Understanding document (opens in a new tab)
- Technique Related technique (opens in a new tab)
Related scenarios
- Text Styled to Look Like a Heading Instead of Coded as One
- Text Columns Faked With Spaces Instead of Real Table Markup
- Table Layout Faked With Spaces Instead of Real Table Code
- Clickable Div Acting as a Link Button With No Real Role
- Structural HTML Tags Used Purely for Visual Styling
- Tabular Data Placed Inside a Preformatted Text Block