Skip to content
Get packs

Heading Order Checker

Reviews HTML headings for logical, non-skipped order to aid screen reader navigation

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

When installed, the agent reviews rendered HTML or components and checks that heading levels (h1 to h6) follow a sequential, logical hierarchy without skipping levels, such as an h3 directly after an h1. It flags violations, suggests changing heading levels, and explains why a clean outline helps screen reader users who jump between headings. It works from written guidance only; the skill contains no executable scripts.

Great for

  • Front-end developers auditing page markup for accessibility
  • Designers and QA reviewers checking a page's heading outline before release
  • Teams learning why heading structure matters for screen reader users

Skip it if

  • Visual styling problems: the skill checks semantic heading levels, not how large text looks, so a heading styled small may still be correct and vice versa
  • Sites needing a full accessibility audit: it covers only heading order, not contrast, labels, or keyboard support in general, and automated checks cannot confirm real screen reader experience

Try asking

  • “Review this page's HTML and tell me if any headings skip levels.”
  • “Check my React component for heading order problems and suggest fixes.”
  • “Explain to my team why our h3 comes right after the h1 and how to fix it.”
Step-by-step guide: how to use Heading Order CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    heading-order.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip heading-order.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip heading-order.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the rendered DOM or the full component markup rather than source fragments, so the agent sees the actual heading levels.
  • Ask the agent to verify fixes with a browser accessibility tool or screen reader, since the skill itself only reads markup.
  • Combine with other accessibility skills for a broader review, because this one covers heading order only.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.