• June 1, 2025

Fixing Empty Table Headers for Accessibility

Rule ID: empty-table-header
Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: Deque Best Practice

How to Fix the Problem

To meet accessibility best practices, each table header element (<th>, or those with roles like role="rowheader" or role="columnheader") must contain visible, descriptive text. This ensures that all users, including those relying on screen readers, can understand the data structure of a table.

Correct Example:

Incorrect Examples:

To Fix:

• Ensure every <th> tag has visible text content.

• Do not rely solely on ARIA attributes like aria-label—they are not a substitute for visible content.

• If a cell does not serve as a header, use <td> instead of <th>.

Why it Matters

Tables are used to present structured data. Headers are essential for defining the relationship between rows and columns, which allows users—especially those using assistive technologies—to understand the context of each cell. When headers are empty or lack visible text:

• Screen readers cannot accurately communicate the table’s structure.

• Sighted users may also be confused by unlabeled columns or rows.

• Users navigating via keyboard or screen reader cannot identify what the data represents.

Visible header text enhances comprehension for all users and aligns with good accessibility and usability practices.

Rule Description

Each table header must contain visible text that clearly conveys its purpose. If the table cell does not act as a header, then it should use <td> instead of <th>. Providing clear headers improves both semantic clarity and screen reader navigation.

The Algorithm (in simple terms)

1. Find all elements marked as headers in a table (<th>, or elements with roles rowheader or columnheader).

2. Check whether these elements contain visible text.

3. If the header is empty or only uses hidden labels (like aria-label), it fails the check.