Nested Headings
Headings are meant to sit side by side, each one marking the start of a section. When one heading is placed inside another, the two collapse into a single announcement — or one of them disappears from the heading list entirely. A screen reader user navigating by headings skips straight past a section that looked, on screen, like it was there.
This check finds heading elements nested inside other heading elements.
What the tool checks
Every heading on the page is examined to see whether another heading sits inside it. The tool looks at the page as the browser finally renders it, not at the source markup.
Why it matters
Jumping from heading to heading is the fastest way a screen reader user has to survey a page. A heading that never makes it into that list is a section the user will not find, no matter how prominent it looks visually.
When it reports an issue
A heading element contains another heading element. Both the outer and the inner heading are identified in the report, along with their levels and their text.
When it stays quiet
| Situation | Why it is not reported |
|---|---|
| Markup the browser already fixed | Some invalid nesting, such as <h1><h2>...</h2></h1>, is silently rewritten by the browser into two sibling headings. By the time the page renders there is no nesting left, so there is nothing to report — and nothing wrong for the user. |
| Sibling headings in the same container | Two headings next to each other are normal structure, not nesting. |
| Hidden headings | Headings removed from view with display: none or visibility: hidden are left out. |
What the report says
Title: Headings incorrectly nested into each other
Description:
<inner_tag>(level N) "text" is nested inside<outer_tag>(level M) "text".Actual result: The nested heading is not announced correctly and may be skipped during navigation.
Expected result: Heading elements should not be nested. Each heading should be independent in the DOM structure.
WCAG checkpoint: 1.3.1 - Info and Relationships
How to verify it by hand
- Open the page and turn on a screen reader.
- Navigate by headings — the H key in NVDA.
- Check whether every heading you can see on screen is announced as its own entry, or whether any of them is skipped or merged into the one before it.
Known limitations
- The check reads the rendered page, not the source. Because browsers quietly repair some invalid nesting, a problem that exists in the source code may never show up in the report. That is the correct outcome for the user, but it means the report is not a review of the HTML as written.
- It only looks at nesting. Whether the heading levels run in a sensible order — an
h4following anh1with nothing in between — is not part of this check.
WCAG reference
Success Criterion 1.3.1 Info and Relationships (Level A)