th-has-data-cells
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Ensure table headers associate with data cells. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
58
67%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Fix and improve this skill with Tessl
tessl review fix ./skills/th-has-data-cells/SKILL.mdEnsure table headers associate with data cells
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
- Repository
- thedaviddias/Front-End-Checklist
- Commit
48405aa
- Last updated
- First committed
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.