Heading levels skipped

WCAG 1.3.1 (A) · EN 301 549 9.1.3.1

The page jumps from one heading level to another, skipping the ones in between (h{from} to h{to}).

Why it matters

Headings are the table of contents people navigate a page by. When levels skip, that outline stops reflecting the real hierarchy and the person cannot tell whether the new section belongs to the previous one or starts fresh.

How to fix it

Use levels in order. If you skipped a level because of font size, set the correct level and adjust the size in CSS.

<h1>Shop</h1>
<h4>Offers</h4>

<h1>Shop</h1>
<h2 class="small-heading">Offers</h2>

Related

• Form fields with no label
• Option group with no group label
• Missing main heading, or more than one
• The page has no headings