Use logical heading hierarchy
SkillMediaHeading-hierarchy is a skill for AI agents that reviews rendered HTML for logical heading hierarchy. It checks that pages use one h1, avoid skipped levels, and carry descriptive heading text, then flags violations and suggests fixes using semantic headings rather than styles. This helps screen reader users navigate pages like a table of contents.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an AI agent that can load skills.
Then ask your AI: use the Use logical heading hierarchy skill
What your AI can do with it
- Checks rendered HTML for one h1 per page
- Flags skipped heading levels in the markup
- Reviews heading text for descriptiveness
- Explains how screen reader users rely on headings like a table of contents
- Suggests fixes using semantic headings rather than styles
- Inspects keyboard behavior, focus flow, accessible names, and screen-reader output where r
Getting started
- Have an AI agent that can load skills.
- Add the heading-hierarchy skill to the agent's available skills.
- Ask the agent to review a rendered HTML page, interactive component, or design-system pattern for logical heading hierarchy.
- Apply the suggested fixes using semantic headings in the markup.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/heading-hierarchy/SKILL.md and read by ahel’s review.
Screen reader users navigate by headings like a table of contents—skipping levels or poor hierarchy makes content impossible to understand and navigate.
Quick Reference
- Use exactly one h1 per page for the main title
- Never skip heading levels (h1 → h2 → h3, not h1 → h3)
- Heading text should describe the content that follows
- Don't use headings for visual styling—use CSS instead
Check
Verify pages have exactly one h1, headings follow sequential order without skipping levels (h1 → h2 → h3), and heading text clearly describes the content that follows. Use accessibility tools to generate a heading outline.
Fix
Structure headings to reflect content hierarchy. Start with h1 for the page title, use h2 for major sections, h3 for subsections. Never skip heading levels or use headings purely for visual styling.
Explain
Explain how screen reader users navigate by headings like a table of contents, and why skipped levels or missing structure forces users to work harder to understand page organization.
Code Review
Review the rendered markup and interactive states that affect Use logical heading hierarchy. 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/heading-hierarchy
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What does the skill check for?
- It reviews rendered HTML for logical heading hierarchy: one h1 per page, no skipped levels, and descriptive heading text. It flags violations and suggests fixes using semantic headings rather than styles.
- Why does heading hierarchy matter?
- Screen reader users rely on headings like a table of contents to navigate pages. A logical hierarchy makes that navigation work.
- Does it only look at headings?
- Its focus is heading hierarchy, but when reviewing components it can also inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Advanced
- Item type
- skill
- Key
heading-hierarchy- Source
- github.com/thedaviddias/front-end-checklist