- Success Criterion 1.3.1
- Conformance level A
Table Header Cells Left Completely Blank
1.3.1 — Info and Relationships
Scenario
Setting
A job board's application form
What’s wrong
Empty table header cells (header-cell code (th) with no text) leaving columns/rows unnamed for header–cell association.
Example
<table>
<tr><th></th><th>Beginner</th><th>Intermediate</th><th>Expert</th></tr>
<tr><th></th><td><input type="radio" name="excel"></td><td><input type="radio" name="excel"></td><td><input type="radio" name="excel"></td></tr>
</table> Why it matters
A screen reader user hears "blank, radio button" for the skill row, with no name for the skill they're actually rating.
How to test
Navigate a data table with a screen reader's table mode: empty th cells announce as blank column/row names — check every header cell has text.
How to fix
An empty header cell announces nothing; give every row and column header real, descriptive text.
<table>
<tr><th></th><th>Beginner</th><th>Intermediate</th><th>Expert</th></tr>
<tr><th>Excel</th><td><input type="radio" name="excel"></td><td><input type="radio" name="excel"></td><td><input type="radio" name="excel"></td></tr>
</table> Outcome
An applicant hears Excel, Intermediate announced together while rating each skill.
Who is affected
Screen reader users completing the skills matrix can't tell which skill each row of radio buttons belongs to.
Learn more
- Understanding Understanding document (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
- Layout-Only Table Wrongly Coded With Real Header Cells