page-has-heading-one

Page must contain a level-one heading

Description

The purpose of headings is to divide the content and define its hierarchy on the page. They are particularly significant for screen reader users because they also often use them to navigate the page and understand the context of its different parts. Therefore having at least heading level one is considered a best practice.

Quick Fixes

Add to the page a level one heading (<h1>) that indicates the context and content of the page.

In cases where for design or branding constraints, it is not possible to add a visible heading to the page, you can add a title that will only be available to screen readers, like in the example below.

1<style>
2.sr-only {
3    clip: rect(0 0 0 0);
4    clip-path: inset(50%);
5    height: 1px;
6    overflow: hidden;
7    position: absolute;
8    white-space: nowrap;
9    width: 1px;
10}
11</style>
12
13<h1 class="sr-only">
14    <!-- Heading Content -->
15</h1>

How Users Are Affected

Some users may not get an optimal user experience perceiving and understanding the context of the page and its content.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria: N/A (Best Practice)