Heading levels must not skip

Rule heading-order · Structure & semantics · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Screen-reader users navigate by heading level to understand a page’s outline. Skipping a level (e.g. h2 → h4) implies a missing section and breaks that mental model.

How to fix#

Choose heading levels by document structure, not by visual size. Style with CSS; keep the level sequence contiguous. Where the element cannot change, aria-level on the existing heading adjusts its exposed level.

Example#

<h1>Title</h1><h4>Section</h4>

<h1>Title</h1><h2>Section</h2>

Example#

<h1>Title</h1><h3>Section</h3>

<h1>Title</h1><div aria-hidden="true"><h4>Decorative</h4></div><h2>Section</h2>

aria-hidden headings are not in the accessibility tree and do not count toward the outline.

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Best practice

References#

• W3C — Headings