• 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