When should this skill be used?

When reviewing rendered HTML, interactive components, or design-system patterns related to ensuring table headers associate with data cells.

Why does header-to-data-cell association matter?

So screen readers announce table cells correctly, with the right header context.

Ensure table headers associate with data cells

SkillMedia

th-has-data-cells is an agent skill for accessibility review of HTML tables. It checks that table headers associate with data cells so screen readers announce them correctly. Use it when reviewing rendered HTML, interactive components, or design-system patterns: it checks native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

Use Ensure table headers associate with data cells in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add Ensure table headers associate with data cells and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the Ensure table headers associate with data cells skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have an AI agent that can load skills.

Ensure table headers associate with data cellsStart free

What your AI can do with it

Checks that table header cells associate with their data cells
Verifies native HTML table semantics first
Inspects keyboard behavior and focus flow in table components
Reviews accessible names on table elements
Checks screen-reader output where relevant
Applies to rendered HTML, interactive components, and design-system patterns

Getting started

Have an AI agent that can load skills.
Add the th-has-data-cells skill to the agent's available skills.
Ask the agent to review a rendered HTML table, component, or design-system pattern.
The agent applies the skill's checks to headers, data cells, keyboard behavior, and screen-reader output.

What this skill tells your AI

The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/th-has-data-cells/SKILL.md and read by ahel’s review.

Orphaned headers without data cells can confuse users of assistive technology and indicate a broken table structure.

Quick Reference

Every <th> must be associated with one or more <td> cells
Avoid empty headers that don't describe any data
Remove unnecessary headers to reduce screen reader noise

Check

Verify that all <th> elements are correctly associated with data cells.

Fix

Remove empty headers or ensure they are correctly mapped to data cells.

Explain

Explain why every header must have associated data to maintain an accessible table structure.

Code Review

Review the rendered markup and interactive states that affect Ensure table headers associate with data cells. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/accessibility/th-has-data-cells

Signals

GitHub stars: 74k
Forks: 7k
Last commit: Oct 2026

Questions

When should this skill be used?: When reviewing rendered HTML, interactive components, or design-system patterns related to ensuring table headers associate with data cells.
What does it check first?: Native semantics. After that, it inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Why does header-to-data-cell association matter?: So screen readers announce table cells correctly, with the right header context.

Advanced

Item type: skill
Key: th-has-data-cells
Source: github.com/thedaviddias/front-end-checklist

github.com/thedaviddias/front-end-checklist