page-has-heading-one

Description

The page-has-heading-one rule ensures that every page contains at least one <h1> element. An <h1> heading serves as the primary title of the page, immediately communicating the main topic to all users. Screen reader users often navigate a page by jumping between headings, and the <h1> is typically the first heading they encounter, setting the context for everything that follows. A page without an <h1> lacks this essential orientation point.

This rule meets WCAG requirements by:

1. Conveying Document Structure (WCAG 1.3.1 Info and Relationships): It ensures the top-level heading of the page’s content hierarchy is present and programmatically determinable, giving assistive technologies and users a clear structural entry point.
2. Providing Descriptive Headings (WCAG 2.4.6 Headings and Labels): It ensures that the page has a top-level heading that accurately describes the main topic, helping users understand where they are and what the page is about.

To comply with this rule, add a single <h1> element to each page that clearly describes its primary topic or purpose.

Examples

This example shows a page with no <h1> element. The content starts at <h2>, which leaves the document without a top-level heading. Screen reader users navigating by heading level will find no main title to orient them.

Here, an <h1> is added to identify the main topic of the page, establishing a clear top-level heading for the document outline.

How to fix?

To fix violations of the page-has-heading-one rule, follow these steps:

• Add a single <h1> element to each page that describes the page’s primary content or purpose.

• Place the <h1> as the first heading in the <main> content area so it immediately identifies the primary content for users navigating by heading.

• Ensure the <h1> text is descriptive and unique across your site. It should tell users exactly what the page is about, distinct from the site name or navigation.

• Do not use multiple <h1> elements on a single page; use one <h1> for the page title and <h2> through <h6> for subsections in a logical hierarchy.

Reference

• WCAG Success Criterion 1.3.1: Info and Relationships

• WCAG Success Criterion 2.4.6: Headings and Labels