<td> elements in a large <table> have one or more table headers

Each cell in a large table is linked to a header so screen readers can navigate it.

Impact

About

Screen readers have features to make navigating tables easier. Ensuring that <td> elements in a large table (3 or more cells in width and height) have an associated table header may improve the experience for screen reader users.

Risks

Screen reader users cannot understand data in large tables.

Why it's important

Improves the experience for assistive technology users by ensuring content structure is clear and consistent.

User stories

As an assistive technology user, I want content to be properly structured so that I can navigate and understand the page.

Code

Failing pattern:

<!-- Fail: data cells with no header row -->
<table>
  <tr><td>Jane Smith</td><td>Finance</td></tr>
</table>

Passing pattern:

<!-- Pass: th elements provide column headers -->
<table>
  <tr><th>Name</th><th>Department</th></tr>
  <tr><td>Jane Smith</td><td>Finance</td></tr>
</table>

Error

ScanGov messaging when a site fails a standard:

Failed: <td> elements in a large <table> have one or more table headers

Guidance

Web Content Accessibility Guidelines (WCAG)

Indicators

Accessibility