incorrect-heading

Description

Text that is not intended to be a heading should not be incorrectly marked as a heading. This ensures that assistive technologies accurately convey the document structure to users. Proper heading usage is essential for users who rely on screen readers or other assistive tools to navigate and understand content hierarchy.

The incorrect-heading 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, a paragraph is incorrectly marked as a heading using the <h2> element. This violates the incorrect-heading rule because the text is not intended to serve as a heading.

In the following corrected example, the paragraph is properly marked with a <p> tag, ensuring that only actual headings use heading elements:

How to fix?

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

1. Identify all text marked with heading elements (<h1> through <h6> or ARIA role="heading").
2. Ensure that each heading is intended to serve as a structural heading in the document.
3. Replace incorrect heading markup with appropriate semantic elements (e.g., <p> for paragraphs) or use CSS for styling.
4. Use heading levels sequentially to maintain a logical document outline. When using role="heading", use the attribute aria-level with a value from 1 to 6 to specify the heading level, akin to tags <h1> to <h6>.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships
• W3C ARIA12 Technique: Using role=heading