heading-order

Description

The heading-order rule ensures that heading elements (<h1> through <h6>) on a page follow a logical, descending order without skipping levels. Screen reader users frequently navigate pages by jumping between headings, and a correctly ordered heading hierarchy gives them a clear mental map of the page structure. Skipping heading levels (for example, going from <h1> directly to <h3>) breaks this structure and makes content harder to navigate and understand.

This rule meets WCAG requirements by:

1. Conveying Document Structure (WCAG 1.3.1 Info and Relationships): It ensures that the logical structure and hierarchy of content is programmatically determinable through correctly nested headings, not just conveyed visually through font size or weight.
2. Providing Descriptive Headings (WCAG 2.4.6 Headings and Labels): It ensures that the heading hierarchy accurately describes the organisation of each section of content, allowing users to understand and navigate the page efficiently.

To comply with this rule, ensure that heading levels are used in sequence, beginning with <h1> for the main page title and increasing numerically for subsections without skipping any level.

Examples

This example shows a page that jumps directly from an <h1> to an <h3>, skipping <h2>. This creates a broken hierarchy that confuses screen reader users navigating by heading level.

Here, headings follow the correct descending order, providing a clear and logical document outline.

How to fix?

To fix violations of the heading-order rule, follow these steps:

• Review all heading elements on the page and ensure they form a logical hierarchy starting from <h1>.

• Avoid skipping heading levels. Each level should nest directly inside its parent level (for example, <h3> should appear inside an <h2> section, not directly after an <h1>).

• Use headings to convey structure and meaning, not for visual styling. If you need larger or bolder text, use CSS rather than choosing a heading level for its default appearance.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships

• WCAG Success Criterion 2.4.6: Headings and Labels