Heading levels should only increase by one

Log in (Premium content) Request a demo

Rule Description

Headings must be in a valid logical order, meaning <h1>-<h6> element tags must appear in a sequentially-descending order.

The Algorithm, in Simple Terms

Ensures the order of headings is semantically correct.

Why this is Important

The underlying purpose of headers is to convey the structure of the page. For sighted users, the same purpose can be achieved by using different sizes of text. This is not helpful for users of screen readers, though, because a screen reader identifies a header only if it is marked up as such. When headers are properly used, though, the page becomes much easier to navigate for screen reader users and sighted users alike.

How to Fix the Problem

Ensure headings are in a logical order. For example, check that all headings are marked with <h1>-<h6> elements and that these are ordered hierarchically. For example, the heading level following an <h1> should be an <h2>, not an <h3>. Finally, don't use heading mark up on text that isn't actually a heading.

Compliance Data & User Impact

User Impact: Minor
Disabilities Affected:
  • Blindness
  • Deafblindness
  • Mobility/Dexterity
Issue Type:
  • Deque Best Practice
WCAG Success Criteria:
  • Not applicable
Section 508 Guidelines:
  • Not applicable

Related Deque University Course Pages

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: heading-order