Th Has Data Cells

Table headers must relate to real data cells so assistive technologies can understand and announce table structures correctly. This blog explains what the th-has-data-cells rule checks, why meaningful header relationships matter, how to ensure headers describe data accurately and how this supports WCAG 2.2 and wider accessibility expectations. The article is fully original, accurate and structured using the Welcoming Web content framework.

What it is

The th-has-data-cells rule checks whether <th> elements, or elements using role=“columnheader” or role=“rowheader”, actually correspond to data cells (<td>) within the same table. A header must describe a set of data cells. If a header has no data associated with it, its presence can mislead users of assistive technologies.

This rule ensures that every table header contributes meaningfully to the table’s structure.

Why it matters

When a table header does not describe any data cells: - screen readers may announce a header that leads to no information, - users may assume the table is incomplete or incorrectly structured, - navigation through table headers becomes confusing, - cognitive load increases when users hear redundant or misleading information, - complex tables become harder to interpret due to non-functional headers.

Meaningful headers help users understand how information is organised and related.

Who delivers it

Designers plan table structures that support clear header-to-data relationships. Content authors populate tables without adding unnecessary or decorative header cells. Front end developers implement semantic <th> cells only where they meaningfully describe data. Accessibility specialists and QA testers validate that every header corresponds to actual data. Welcoming Web assists by detecting header cells with no associated data.

How to ensure table headers refer to data cells

1. Use <th> only when it describes one or more data cells

Add header cells only when they serve a genuine purpose.

<table>  <tr>    <th>Product</th>    <th>Price</th>  </tr>  <tr>    <td>Coffee</td>    <td>£3</td>  </tr></table>

2. Avoid empty or decorative headers

Do not use <th> to style a cell or create visual spacing.

3. For complex tables, ensure grouping headers relate to data below or beside them

Multi-level headers should meaningfully group the data cells they span.

4. Check role-based headers

If using ARIA roles such as role=“columnheader” or role=“rowheader”, ensure they function exactly like <th> elements and describe real data.

5. Validate header relationships with assistive technologies

Test with screen readers to ensure that headers are announced in a logical and helpful way.

Best practice guidance

Keep table structures simple where possible. Use headers sparingly and only for functional grouping of data. Avoid merging, spanning or layering headers unless required for complex datasets. Document table patterns in design systems to help teams implement consistent and meaningful table semantics.

Compliance mapping

Ensuring headers describe data supports: - WCAG 2.2 Info and Relationships success criterion, - WCAG 2.2 Meaningful Sequence expectations, - ADA Title III expectations for structured data presentation, - EN 301 549 guidance on programmatically determinable relationships, - Equality Act 2010 duties for accessible information.

Welcoming Web supports alignment with recognised standards but does not issue or guarantee compliance certification.

How Welcoming Web supports teams

Welcoming Web identifies header cells that do not relate to any data cells in their table. The platform flags redundant headers, structural anomalies and inaccessible patterns, providing guidance on how to fix them.

Key points for development teams

Use headers only when they describe data. Avoid decorative or redundant <th> elements. Ensure ARIA-based headers behave like real headers. Test tables with assistive technologies. Keep table structures simple and meaningful.

Call to action

Run an audit Check your site for header cells that do not refer to actual data. Supports WCAG 2.2 and ADA goals.

FAQs

What does the th-has-data-cells rule check

It checks whether each table header meaningfully describes one or more data cells.

Why is this important for accessibility

Users need headers to understand how data is organised and what each value represents.

Can a table have headers with no data

No. A header without data creates confusion and should be removed or replaced.

Do ARIA header roles count

Yes. Elements with role=“columnheader” or role=“rowheader” must behave like <th>.

What about tables used for layout

Layout tables should not use <th> or data semantics at all.

How can I check header relationships

Use screen readers or browser accessibility tools to review announced structures.

Does fixing orphaned headers guarantee WCAG compliance

It supports structural clarity but does not guarantee full compliance.

How does Welcoming Web help with header issues

Welcoming Web detects headers without associated data and offers guidance to correct them.

Disclaimer

Welcoming Web supports accessibility improvement and alignment with recognised standards but does not issue or guarantee compliance certification.