Link table cells to headers using IDs
SkillMediatd-headers-attr is an agent skill for accessibility review of HTML tables. It guides an agent through checking that table cells use the headers attribute to reference valid th IDs, which matters in complex tables with multi-level headers where scope alone is not enough. The skill covers native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an agent that can load skills, and a rendered page or component with tables to review.
Then ask your AI: use the Link table cells to headers using IDs skill
What your AI can do with it
- Verify that td headers attributes reference valid and existing th IDs
- Determine when to use the headers attribute instead of scope for complex tables
- Review rendered markup and interactive states that affect header-to-cell linking
- Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate
- Note how to verify fixes with browser accessibility tooling or assistive tech
- Provide code examples and framework-specific guidance via references/rule.md
Getting started
- Have an agent that can load skills, and a rendered page or component with tables to review.
- Add the td-headers-attr skill to the agent's available skills.
- Ask the agent to review the table markup for correct headers-to-th ID linking.
- Apply the suggested fixes and have the agent re-check the markup.
- Consult references/rule.md for full implementation details and code examples.
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
- Aug 2026
Questions
- When should the headers attribute be used instead of scope?
- Use the headers attribute for complex tables with multi-level headers where scope isn't enough. It explicitly links each data cell to its header IDs so screen readers announce the relationship between data and its context.
- How are multiple header IDs written?
- Separate multiple header IDs with spaces in the headers attribute value.
Advanced
- Item type
- skill
- Key
td-headers-attr- Source
- github.com/thedaviddias/front-end-checklist