Heading levels are skipped

  • WCAG 1.3.1 Info and Relationships, level A
  • Moderate
  • Structure
  • Automated
  • Server pass

Why it matters

Headings are a table of contents for people who navigate by them. Jumping from h2 to h4 suggests something is missing, and makes the outline confusing.

How to fix it

Use heading levels in order, without gaps. Choose the level for the structure, then style it with CSS to get the size you want.

<!-- Before -->
<h2>Services</h2>
<h4>Web design</h4>

<!-- After -->
<h2>Services</h2>
<h3>Web design</h3>

Read the W3C guidance: Understanding 1.3.1 Info and Relationships.

Related rules

Find this on your own site. A11yMate scans every page and lists where it happens. See pricing or browse all rules.