Define proper table headers
SkillMediatable-headers is a skill for AI agents that reviews tables in web pages for correct header markup and accessibility. It applies when examining rendered HTML, interactive components, or design-system patterns related to define proper table headers. The agent checks native semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Use Define proper table headers in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Define proper table headers and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Define proper table headers 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 supports loading skills.
What your AI can do with it
- Review rendered HTML tables for proper header markup
- Check native table semantics first
- Inspect keyboard behavior on table components
- Examine focus flow in interactive table patterns
- Verify accessible names on table elements
- Assess screen-reader output where relevant
Getting started
- Have an AI agent that supports loading skills.
- Add the table-headers skill to the agent's available skills.
- Ask the agent to review a rendered HTML table, interactive component, or design-system pattern involving table headers.
- The agent will check semantics first, then keyboard behavior, focus flow, accessible names, and screen-reader output.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/table-headers/SKILL.md and read by ahel’s review.
Properly defined headers allow screen readers to announce the context for each data cell, making complex tables understandable.
Quick Reference
- Use
<th>for all table headers, not<td> - Apply
scope="col"orscope="row"to clarify header relationship - Ensure every data cell is associated with at least one header
- In simple tables, prefer fixing header associations before escalating to caption-level recommendations
- Missing
scope="col"on a straightforward header row is often the clearest first fix
Check
Check that all data tables use <th> elements for headers with appropriate scope attributes.
Fix
Convert header cells to <th> and add the correct scope attribute.
Explain
Explain how <th> and scope help assistive technologies communicate the structure of data tables.
Code Review
Review the rendered markup and interactive states that affect Define proper table headers. 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/table-headers
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 defining proper table headers.
- What does the agent check first?
- Native semantics are checked first, before keyboard behavior, focus flow, accessible names, and screen-reader output.
- Does it test screen readers directly?
- It inspects screen-reader output where relevant, as part of the review.
Advanced
- Item type
- skill
- Key
table-headers- Source
- github.com/thedaviddias/front-end-checklist
github.com/thedaviddias/front-end-checklist