• Success Criterion 1.3.1
  • Conformance level A

Multi-Level Data Table With No Header Associations

1.3.1 — Info and Relationships

Scenario

Setting

A nonprofit's donation form

What’s wrong

Complex tables (multi-level headers, spans) without headers/id associations (code linking data cells to their headers).

Example 

<table>
  <tr><th></th><th>One-time</th><th>Monthly</th></tr>
  <tr><th>$25</th><td>Select</td><td>Select</td></tr>
  <tr><th>$50</th><td>Select</td><td>Select</td></tr>
</table>

Why it matters

A donor using a screen reader hears "Select" repeated with no way to tell whether it's the $25 one-time or $50 monthly option.

How to test

Navigate a multi-level header table with a screen reader's table mode: each data cell should announce all applicable header levels — if not, headers/id associations are missing.

How to fix

When a table has two header dimensions, headers/id ties each cell to both, since scope alone can't cover a corner cell.

<table>
  <tr><th id="blank"></th><th id="once">One-time</th><th id="monthly">Monthly</th></tr>
  <tr><th id="a25">$25</th><td headers="a25 once">Select</td><td headers="a25 monthly">Select</td></tr>
  <tr><th id="a50">$50</th><td headers="a50 once">Select</td><td headers="a50 monthly">Select</td></tr>
</table>

Outcome

A donor hears $25, Monthly, Select announced as one clear combination before choosing.

Who is affected

Screen reader users choosing a donation amount and frequency can't connect a cell to both its row and column header.

Learn more

Related scenarios