Screen reader users navigate pages by jumping between headings — it is their primary orientation mechanism on unfamiliar content. A missing <h1> leaves no entry point. Heading levels that skip (h1 directly to h3) break the expected hierarchy, causing confusion about content relationships. WCAG 2.2 SC 1.3.1 (Info and Relationships) requires structural information to be programmatically determinable, and SC 2.4.6 (Headings and Labels) requires headings to describe their section. Improper heading structure also confuses search engine crawlers, which use heading hierarchy to understand page topic and section weight.
Medium because heading structure failures directly impair screen reader navigation — the most common assistive technology orientation mechanism — but the page remains technically operable for sighted users.
Structure headings as a strict outline: one <h1> per page, with nested levels increasing by at most one at a time:
<h1>Page Title</h1>
<h2>Primary Section</h2>
<h3>Subsection</h3>
<h3>Another Subsection</h3>
<h2>Second Section</h2>
<h3>Details</h3>
Never skip a level — jumping from <h2> to <h4> is invalid. To style text at a smaller size without demoting its heading level, use CSS: apply text-sm or font-size via className, not a lower heading element. In Next.js, ensure your root page.tsx contains exactly one <h1> and that layout components (Header, Sidebar) do not inject additional <h1> tags.
ID: site-health-check.accessibility-mobile.heading-hierarchy
Severity: medium
What to look for: Enumerate all heading tags (<h1> through <h6>) in the HTML in document order. Count the total number of headings and the number of <h1> tags specifically. Walk the heading sequence and check that levels never increase by more than 1 at a time (e.g., h1 to h3 is a skip; h1 to h2 to h3 is valid; going from h3 back to h1 is valid since decreasing is allowed).
Pass criteria: At least 1 <h1> tag exists, and no more than 1 <h1> is present on the page. Heading levels in the sequence only increase by 1 at a time (no skips). Report the heading outline: "Found X headings: h1, h2, h2, h3, h2."
Fail criteria: No <h1> tag found, or heading levels skip (e.g., h1 directly followed by h3 with no h2 in between).
Skip (N/A) when: The response body contains no heading tags at all (<h1> through <h6> — the page may be a non-content page like a login form).
Error when: SPA detected.
Detail on fail: "No <h1> tag found on page" or "Heading hierarchy skips from h1 to h3 — missing h2 level"
Remediation: A proper heading hierarchy helps screen readers navigate the page and improves SEO. Structure your content with a single <h1> and sequentially nested subheadings:
<h1>Page Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>
<h2>Another Section</h2>
In Next.js, ensure your root layout or page has exactly 1 <h1>. Do not skip levels — if you need smaller text, use CSS (text-lg, text-sm) rather than jumping from <h2> to <h4>.