Heading Structure

Ensures headings (<h1>-<h6>) are logically ordered and not skipping levels.

What is this check?

This check verifies that your headings follow a logical order (e.g., an `<h3>` should not appear before an `<h2>`) and that you are not skipping heading levels (e.g., going from an `<h1>` directly to an `<h3>`).

Why is it important?

Users of screen readers often navigate a page by its headings. A logical and consistent heading structure acts as an outline, allowing them to understand the page's organization and jump to the section they need.

What is the impact?

An illogical heading structure can be very confusing and disorienting for screen reader users.

Example Implementation

<!-- GOOD -->
<h1>Main Title</h1>
  <h2>Section 1</h2>
    <h3>Subsection 1.1</h3>
  <h2>Section 2</h2>

<!-- BAD (Skipped Level) -->
<h1>Main Title</h1>
  <h3>Subsection without a parent H2</h3>