In one paragraph
Heading levels skipped means a source heading moves more than one level deeper than the previous heading under this check. Review whether the markup expresses the actual content hierarchy and fix misleading levels without choosing tags merely for size. A sequence warning alone does not establish a specific WCAG failure or ranking penalty. Inspect the complete outline, including dynamic and responsive content.
Why it matters
Headings support scanning and navigation through a document's sections. Clear nesting helps communicate which topics belong within others. A sudden jump can suggest a missing level, but its real significance depends on the content and component context.
WCAG requires appropriate structural relationships and descriptive headings where applicable; it does not impose a standalone universal rule that every numeric sequence jump is automatically a failure. Assess whether the programmatic structure communicates the visible relationships.
Returning from a deeply nested subsection to a higher-level section is normal. A component library that hard-codes h4 because it looks small can instead create misleading depth when reused elsewhere. Keep typography separate from semantic level.
How WebAuditOS evaluates this finding
The supplied custom rule reads h1 through h6 in served HTML document order. It permits any first level and upward moves, but warns at the first downward jump exceeding one level. Fewer than two headings, unparseable content, and the documented error or restricted statuses are not graded.
Its low-severity warning is not a rendered accessibility-tree audit. CSS-hidden headings still count, JavaScript-added headings are absent, and role=heading with aria-level is not included. Fixing one reported jump can reveal another because it reports the first instance.
How to fix it
- Inspect the actual page topic and section relationships. Compare visual grouping, source tags, and rendered accessibility output rather than changing every h3 mechanically.
- Give straightforward content a coherent outline. An illustrative sequence is:
<h1>Shipping guide</h1>
<h2>Delivery services</h2>
<h3>Express delivery</h3>
<h2>Returns</h2>The return to h2 is intentional. Use levels that reflect your actual information hierarchy.
- Change shared components to accept an appropriate semantic level separately from their visual appearance. Preserve a style class instead of selecting heading tags by default font size.
- Review cards, sidebars, navigation, and repeated modules in their embedding context. A component that is valid inside one section may need a different level on another template.
- Keep real headings semantic and avoid turning decorative labels or prices into unnecessary outline entries. Conversely, a styled paragraph that really starts a section may need proper heading markup.
- Inspect hidden responsive variants and client-generated content. A source-only pass can miss the hierarchy users actually navigate after rendering or interaction.
- Test heading navigation where practical and verify meaningful labels. A numerically sequential outline full of vague headings is not automatically useful.
- Rescan and review the whole document after the first repair. Do not add empty intermediary headings solely to manufacture a sequence with no structural gap.
What the fix can break
Changing tags can activate global margins and typography. Test mobile layouts and repeated components, not just one screenshot.
Renamed headings can alter generated fragment identifiers or table-of-contents links. Preserve useful stable targets when existing links matter.
Do not mistake an ungraded page with few source headings for a validated outline. Verify whether the actual public content is present and structured.
Questions
Is a skipped level automatically a WCAG failure?
No. Assess the actual structural relationships and applicable requirements. The supplied check is a warning heuristic.
Can I go from h4 back to h2?
Yes, when returning to a higher-level section. That is different from skipping deeper into an unexplained subsection.
Does this check see JavaScript headings?
Not in the supplied source-only implementation. Review rendered content separately.
Which related checks help?
Review H1 presence, styled paragraph headings, and bypass mechanisms.