incorrect-heading-level

Description

Heading levels (<h1> to <h6>) must follow a logical and hierarchical structure. This ensures that assistive technologies can accurately convey the document outline to users. Proper heading hierarchy is essential for users who rely on screen readers or other assistive tools to navigate and understand content structure.

The incorrect-heading-level rule aligns with WCAG Success Criterion 1.3.1 (Info and Relationships), which requires that information, structure, and relationships conveyed through presentation must be programmatically determinable.

Examples

In the following example, the heading levels skip from <h1> directly to <h3>, violating the incorrect-heading-level rule because the hierarchy is not logically sequential.

In the following corrected example, the heading levels follow a logical sequence (<h1> followed by <h2>), ensuring proper document structure:

How to fix?

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

1. Review the heading structure of your webpage to ensure it follows a logical hierarchy (<h1> to <h6> without skipping levels).
2. Use <h1> for the main title, followed by <h2> for subsections, <h3> for sub-subsections, and so on.
3. Avoid skipping heading levels (e.g., jumping from <h1> to <h3>).
4. If restructuring is needed, adjust heading levels to maintain a consistent and meaningful outline.

Reference

• WCAG Technique ARIA12: Using role=heading to identify headings