Table headers in a data table must refer to data cells

Data tables help organise and present information in a structured way. However, if header cells (<th>) are not correctly associated with their corresponding data cells (<td>), screen readers cannot communicate the relationships between them. As a result, users who rely on assistive technologies may hear table content without understanding what each value represents.

In an accessible table, data cells are associated with headers, not the other way around. These associations allow assistive technologies to announce both the value and its context together.

WCAG Success Criterion

1.3.1 Info and Relationships – Level A

Information, structure, and relationships conveyed through presentation must be programmatically determined or available in text.

This means table headers and data must be coded in a way that assistive technologies can recognise their relationships programmatically, not just visually.

How Screen Readers Know Which Header Applies

Screen readers do not interpret tables visually. Instead, browsers rely on the table’s markup to determine header associations, which are the programmatic relationships between header cells (<th>) and data cells (<td>). These associations are then exposed to assistive technologies so users can understand what each data value represents.

Header associations tell screen readers which row and column headers apply to a specific data cell, allowing table content to be announced with clear context.

Header associations can be created in two ways:

• Implicit associations, using proper <th> placement along with the scope attribute (such as scope="row" or scope="col").
• Explicit associations, using the headers attribute on <td> elements that reference the id of related <th> elements.

To ensure tables are accessible, at least one of these methods, implicit or explicit, must be used correctly. If neither method is implemented properly, the table may still appear visually correct, but screen readers will announce data cells without their intended context, making the information difficult or impossible to understand.

Why This Matters

Screen readers read tables one cell at a time. When tables are marked up correctly, the screen reader first announces the related row and column headers and then reads out the cell value. This helps users understand exactly what each piece of data refers to.

If these header connections are missing or incorrect, important context is lost. For example, a screen reader might announce “Henry” without saying that it appears under the “City” column, leaving the user unsure what that value represents.

Proper table markup ensures that:

• People who are blind or use screen readers can clearly understand how data is organised
• The relationship between headers and data is communicated in a way assistive technologies can interpret
• Screen reader navigation through rows and columns works smoothly and as expected

When You Should Use It

Use proper header associations whenever you create a data table, including:

• Product comparison tables
• Attendance lists
• Reports or schedules
• Any structured information presented in rows and columns

Tables should not be used for layout purposes. If a table is purely decorative or used only for visual positioning, it should be replaced with a CSS-based layout. If a layout table cannot be avoided, its semantics must be removed so it is ignored by assistive technologies.

How to Mark Up Tables Correctly

1. Use <th> for Headers and <td> for Data

Each header cell must use a <th> element.
Each data cell must use a <td> element.

This distinction is essential for assistive technologies to identify structural roles within the table.

2. Use the scope Attribute

The simplest way to associate headers with data cells is by using the scope attribute on <th> elements.

• scope="col" — The header applies to all data cells in the same column
• scope="row" — The header applies to all data cells in the same row

Example (Correct)

<table>
  <caption>Teddy bear collectors:</caption>
  <tr>
    <th scope="col">Last Name</th>
    <th scope="col">First Name</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>Phoenix</td>
    <td>Imari</td>
    <td>Henry</td>
  </tr>
  <tr>
    <td>Zeki</td>
    <td>Rome</td>
    <td>Min</td>
  </tr>
  <tr>
    <td>Apirka</td>
    <td>Kelly</td>
    <td>Brynn</td>
  </tr>
</table>

Here, screen readers can correctly announce values such as “City, Henry” when navigating the table.

Example (Incorrect)

Using scope="row" for column headers:

<th scope="row">Last Name</th>
<th scope="row">First Name</th>
<th scope="row">City</th>

This causes screen readers to treat these headers as applying to rows rather than columns, resulting in incorrect or misleading announcements during navigation.

Common Mistakes

• Using <th> elements without defining their scope
• Applying the headers attribute incorrectly or pointing to non-existent IDs
• Using <th> where <td> is appropriate
• Omitting table semantics entirely (for example, using <div> elements to simulate tables)

These issues often do not produce visible errors but silently degrade accessibility.

Good Practices

• Always use semantic table markup (<table>, <thead>, <tbody>, <th>, <td>,<tr>)
• Include a <caption> to describe the table’s purpose
• Use scope for simple tables and headers/id for complex, multi-level headers
• Verify header associations using a screen reader or accessibility checker

Related Techniques

• H43: Using id and headers attributes to associate data and header cells
• H63: Using the scope attribute to associate header and data cells
• H51: Using proper table markup for tabular data

Wrapping Up

Accessible tables depend on clear, programmatic relationships between headers and data cells. When those relationships are correctly defined, screen readers can announce table content in a way that preserves meaning and context.

Well-marked tables do more than meet accessibility requirements; they ensure that data can be understood by everyone who needs it.