Inappropriate H1 Check

Description

The “Inappropriate H1 Check” evaluates whether there are multiple <h1> elements.

Example outcome

I have identified 2 level 1 headings. There should be one.

Impact

• Visual Impairments: Screen readers often treat the first <h1> as the title of the page. Multiple <h1>s can confuse the user about the primary topic, especially when navigating by headings or using a heading outline. Missing an <h1> altogether may cause users to think the page lacks structure or content.
• Cognitive Disabilities: Heading hierarchy aids comprehension and orientation. Without a clear top-level heading (<h1>), users may struggle to determine what the page is about, especially if the structure is otherwise inconsistent.

Fixes

To address an inappropriate number of <h1> elements:

1. Verify whether there are multiple or no <h1> elements.
2. If there are multiple <h1> elements, replace some of them by other heading levels (e.g., <h2>), until there is only 1 <h1> heading corresponding to the page title.
3. If there is no <h1> element, add one describing the page purpose.

Resources

• WCAG 2.2: Understanding Success Criteria 1.3.1
• WCAG 2.2 Techniques: Technique H42: Using h1-h6 to identify headings
• WebAIM: Semantic Structure: Regions, Headings, and Lists