Improper Heading Order: Why Skipping Levels Breaks Navigation

Most screen readers let a user pull up a list of every heading on a page and jump straight to any one of them — it's one of the fastest ways to skim a long page without reading it top to bottom, similar to how a sighted user's eye jumps between bold headings when scanning. That navigation model depends on headings being nested in a logical order: an H1 for the page title, H2s for major sections, H3s for subsections within those, and so on — never skipping a level on the way down.

This is part of WCAG Success Criterion 1.3.1 (Info and Relationships), Level A.

The two failure patterns

Skipped levels. Jumping from <h1> straight to <h3> with no <h2> in between doesn't just look visually odd — a screen reader user navigating by heading level has no way to know a section was skipped, or gets confused about where they are in the document's structure.

<!-- Before -->
<h1>Annual Report</h1>
<h3>Revenue Breakdown</h3>

<!-- After -->
<h1>Annual Report</h1>
<h2>Revenue Breakdown</h2>

Headings chosen for visual size, not document structure. Using an <h3> somewhere purely because "it happened to look the right size" — rather than because that content is genuinely a subsection of the preceding <h2> — breaks the outline just as much as skipping a level, even though nothing looks wrong on screen. The heading tag should always reflect the actual structure of the content; use CSS to control how a heading looks, and the tag itself to say what it is.

The reverse problem: bold or large text styled to look like a heading, using a <p> or <span> instead of a real heading tag. This one is invisible in the heading-navigation list entirely — the "heading" a sighted user sees isn't a heading to a screen reader at all, so it can't be jumped to or used to build a page outline.

How to fix it

Pick heading tags based on document structure first, then style them with CSS to look however the design calls for — a heading's HTML tag and its visual appearance are two separate decisions, and conflating them is the root cause of nearly every heading violation.

/* An h2 can look small if the design wants that — the tag stays h2 */
h2.section-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}

Every page should also have exactly one <h1> describing the page's overall topic — not zero, and not several competing ones.

Official references

• Deque University: empty-heading
• Deque University: heading-order
• Deque University: p-as-heading
• W3C Technique G141