Multiple level one headings detected

Multiple level one headings detected — rule summary

Field	Value
Rule code	Heading_H1_Multiple
WCAG conformance level	AA
WCAG success criterion	2.4.6 Headings and Labels
Must be fixed at source	No

Description

We have detected multiple level 1 headings on the page. Each page should have exactly one primary heading (level-one). A level one primary heading can be added via the H1 HTML tag or with the following ARIA attributes: role=heading and aria-level= 1. A level 1 heading should serve as the main title of the page and describe its overall purpose.

How to fix

Use only one top-level heading on a page. That heading should describe the page's main idea. Use an <h1> element for this heading. For other headings on the page, use <h2>, <h3>, and so on.

<h1>Contact us</h1>
<h2>Online</h2>
…
<h2>By phone</h2>
…

Using standard heading elements is best. If that's not possible, you can use role="heading" and aria-level="#" on other elements.

<div role="heading" aria-level="1">Contact us</div>
<div role="heading" aria-level="2">Online</div>
…
<div role="heading" aria-level="2">By phone</div>
...