Link table cells to headers using IDs
SkillMediatd-headers-attr is a skill for AI agents that reviews HTML tables so header cells link correctly to their columns via id attributes. It guides the agent through checking native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output when reviewing rendered HTML or design-system patterns.
Use Link table cells to headers using IDs in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Link table cells to headers using IDs and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Link table cells to headers using IDs 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 agent that can load and use skills.
What your AI can do with it
- Review rendered HTML tables for correct headers-id linking
- Check native table semantics before other checks
- Inspect keyboard behavior of interactive components
- Examine focus flow in design-system patterns
- Verify accessible names on table-related components
- Assess screen-reader output where relevant
Getting started
- Have an agent that can load and use skills.
- Add the td-headers-attr skill to the agent's available skills.
- Ask the agent to review the HTML tables, interactive components, or design-system patterns in question.
- The agent will check native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/td-headers-attr/SKILL.md and read by ahel’s review.
In complex tables with multi-level headers, explicit header-to-cell linking ensures screen readers accurately announce the relationship between data and its context.
Quick Reference
- Use the
headersattribute for complex tables wherescopeisn't enough - Ensure the
headersattribute references valididvalues of<th>elements - Separate multiple header IDs with spaces
Check
Verify that td headers attributes reference valid and existing th IDs.
Fix
Correct the headers attribute to reference the appropriate th IDs.
Explain
Explain when to use the headers attribute instead of scope for complex table structures.
Code Review
Review the rendered markup and interactive states that affect Link table cells to headers using IDs. 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/td-headers-attr
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Oct 2026
Questions
- When should this skill be used?
- Use it when reviewing rendered HTML, interactive components, or design-system patterns related to linking table cells to headers using IDs.
- What does the skill check first?
- It checks native semantics first, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- What does it do with table headers?
- It helps review HTML tables so header cells link correctly to their columns via id attributes.
Advanced
- Item type
- skill
- Key
td-headers-attr- Source
- github.com/thedaviddias/front-end-checklist
github.com/thedaviddias/front-end-checklist