Skip to content
All AI readability rules
WarningShared Core8 of 40 ptsSemantics

How to fix: Broken heading hierarchy

A heading hierarchy is the outline formed by a page's h1 through h6 elements, and it must have exactly one h1 naming the page with no level skipped along the way, because that outline is what an answer engine uses to decide which chunk of the page answers a question.

The check

What is this?

A heading hierarchy is the outline your h1 through h6 tags describe. AccessKnight reads that outline from the raw HTML and checks two things: that exactly one h1 names the page, and that no heading jumps more than one level deeper than the one before it. Both are structure, not styling.

Retrieval systems chunk a page before they read it. The heading outline is the cheapest, most reliable boundary available for that split, because it is explicit in the markup rather than inferred from layout. A clean outline means each section arrives at the model as a labelled unit with a title that states its subject. A broken outline means the chunker guesses, and the answer it lifts may carry the wrong heading with it.

Two failure shapes cover almost every case. The first is a template that marks the site name as an h1 in the header and the page title as a second h1 in the body, which flattens the outline so nothing is the top. The second is choosing heading levels by font size — reaching for h4 because h2 looked too big — which leaves a gap the parser reads as a missing section. Both are fixed by picking levels for structure and setting size in CSS.

The impact

Who does this affect, and why does it matter?

Answer engines first. ChatGPT search retrieving through OAI-SearchBot, Perplexity, Claude, and Google AI Overviews all segment a page before deciding what to quote. The outline is also what a question-phrased heading attaches to, so a broken hierarchy weakens the Extractability pillar's question-heading and direct-answer checks at the same time.

And screen reader users, for the same underlying reason. Heading navigation is a primary way of moving through a page: users jump heading to heading or open a headings list to orient. A page with three h1s reads as three stacked documents; a page that skips h2 to h4 implies a section that was never written. The identical edit serves both readers, which is why this rule sits in the Shared Core pillar. The WCAG rules heading-order, missing-h1, and empty-heading cover the same ground from the accessibility side.

AccessKnight scores this at 8 of the 40 Shared Core points, and the scoring is unusually strict. The three components are worth 3, 2, and 3, so the only reachable totals are 0, 3, 5, 6, and 8. Only a perfect 8 of 8 reports as a pass.

Be precise about what fixing it buys, because this is routinely overstated. Google's own SEO Starter Guide says heading order does not matter for Search ranking, and that is worth repeating rather than burying. The value is elsewhere and it is real: the outline is the boundary a retrieval system chunks by, the heading list the extractability grader receives, and the structure a screen reader navigates. Getting to 8 removes a structural ambiguity; it promises nothing about any engine's output.

The fix

How do I fix it?

Settle on exactly one h1 that names the page, demote any competing h1 such as a site wordmark, then walk the outline top to bottom and close every jump of more than one level. Change tag levels only and restore the sizes you wanted in CSS, because level describes structure and size is a separate decision.

  1. Count the h1 elements on the page. The target is exactly one, naming what this specific page is about rather than what the site is called.
  2. Demote the site name or wordmark in the header from a heading to a paragraph or a link, and keep the h1 for the page topic.
  3. Read the headings top to bottom and look for any jump of more than one level — h1 to h3, or h2 to h4. Moving back up the outline is fine and costs nothing.
  4. Fix the gaps by changing the tag level, not the text, and restore the visual size you wanted with CSS. Heading level describes structure; font size is a separate decision.
  5. Check for headings created with a div and role="heading" — this check reads only the six native tags, so those are invisible to it and should be converted to real heading elements.
  6. Re-scan with AccessKnight and confirm the finding reads 1 <h1> and 0 skipped level(s) for the full 8 of 8.
Page HTML — Before
<header>
  <h1>Northwind Coffee</h1>
</header>
<main>
  <h1>Wholesale pricing</h1>
  <h3>Pallet rates</h3>
  <h4>Minimum order</h4>
</main>

<!-- AccessKnight reports: 4 headings, 2 <h1>, 1 skipped level(s). 3 of 8. -->
Page HTML — After
<header>
  <p class="wordmark">Northwind Coffee</p>
</header>
<main>
  <h1>Wholesale pricing</h1>
  <h2>Pallet rates</h2>
  <h3>Minimum order</h3>
</main>

<!-- AccessKnight reports: 3 headings, 1 <h1>, 0 skipped level(s). 8 of 8. -->
Detection

How does AccessKnight detect this?

AccessKnight selects every h1 through h6 element in document order and records its level, then scores three things independently: 3 points if at least one h1 exists, 2 more if there is exactly one, and 3 more if the document has at least one heading and no skipped levels. A skip is counted only when a heading goes more than one level deeper than the heading before it, so h2 followed by h4 is a skip while h4 followed by h2 is not — moving back up the outline is free. Because the components are 3, 2, and 3, the only totals reachable are 0, 3, 5, 6, and 8, and only a perfect 8 is reported as a pass; 5 and 6 report as warnings. The finding names what it counted, in the form "4 headings, 2 <h1>, 1 skipped level(s).", or "No headings found." when there are none. Two limits are worth knowing. The check reads the six native heading tags only, so a div carrying role="heading" with aria-level is invisible to it. And it records a heading's level whether or not that heading contains any text, which means an empty h2 still satisfies the no-skip rule here while failing the WCAG empty-heading rule — the two checks are measuring different things.

On screen right now

What strings mean this?

If one of these strings is in front of you right now — in a config file, an HTTP header, an AccessKnight report, or another checker’s output — it is describing the failure explained on this page.

AccessKnight report
Logical heading hierarchy
AccessKnight report
No headings found.
AccessKnight report
Use exactly one <h1> and avoid skipping heading levels (e.g. h2 → h4).
Lighthouse
Heading elements are not in a sequentially-descending order
axe DevTools
Heading levels should only increase by one
axe DevTools
Page should contain a level-one heading
WAVE
Skipped heading level
FAQ

Frequently asked questions

Can a page have more than one h1?

Not without losing points here. Two or more h1s score 3 of the available 5 name-related points, capping the check at 6 of 8 even when the rest of the outline is perfect. The HTML5 outline algorithm once allowed sectioned h1s, but no browser or screen reader implemented it, so one h1 per page remains the reliable choice for both readers and parsers.

Is going from h4 back to h2 a skipped level?

No. A skip is counted only when a heading goes more than one level deeper than the one before it, so h2 to h4 is a skip and h4 to h2 is not. Closing a subsection and starting a new top-level section is normal outline behaviour and costs nothing.

Why did my page score 5 of 8 when the headings look correct?

A 5 means exactly one h1 was found and at least one skip was detected. The usual cause is a heading level chosen for its font size — an h4 used because h2 rendered too large. Read the tags in source order rather than on screen, since CSS can make a skip invisible, and check any component that injects its own headings into the page.

Does this check care whether my headings have text?

No, and that is a real gap between the two libraries. This check records a heading's level whether or not it contains any text, so an empty h2 still counts as a level and can satisfy the no-skip rule. The WCAG empty-heading rule is the one that catches a heading with nothing in it. Run both sides to cover the case.

Do heading levels affect the Extractability pillar too?

Yes, directly. The extractability grader is sent a list of the page's headings alongside a text sample, and that list carries only h1 through h4 — h5 and h6 are never included, and it stops at the first 40 headings. A question-phrased heading marked up as an h5 is therefore invisible to the checks that reward question headings and direct answers. Keeping the outline shallow and unbroken is what makes those points reachable at all.
Sources

Where does this come from?

Every external claim on this page traces to one of the documents below — the vendors’ and standards bodies’ own documentation. What AccessKnight adds is the scan, not the standard.

Is this check
failing on your site?

AccessKnight scans any page against all 18 AI-readability checks — including this one — and shows every issue with a fix. Free, no credit card.

✓ Free — no credit card✓ Nothing installed on your site✓ WCAG + AI readability
Fix once, win twice

The accessibility overlap.

This check shares its fix with a WCAG accessibility rule — the same change helps a screen reader and an AI crawler read your page.