Design decision 12 - Double H1 on a single page

Summary

History

There was a worry about the use of two heading level 1 on a single page, one being for the navigation in the section inside which the page sits (service initiation template) and one describing the content of the page. The HTML5 specification supports that pattern, but the concern was that browsers still don’t support it or badly support it. We need to keep in mind that we still need to support IE11. Last summer, IE11 still represented more than 15% of all the traffic on Canada.ca

The proper way of doing it is by using H1s in combination of sectioning element as illustrated in the whatwg spec (see reference below).

Working example

Consider the following HTML semantic as valid:


<section>
	<h1>Canada Emergency Student Benefit (CESB)</h1>
	<nav>
		<h2>Sections</h2>
		<ul>
			<li class="active"><a href="#">Who can apply</a></li>
			<li><a href="#">How much you can get</a></li>
			<li><a href="#">Which periods you can apply for</a></li>
		</ul>
	</nav>
</section>
<section>
	<h1>Who can apply</h1>
	<p>If you are able to work, you must be actively looking for work to be eligible to receive the CESB. If you still cannot find work due to COVID-19, you can re-apply for each CESB eligibility period that you are eligible for.</p>
</section>

Rational

It was confirmed through research, discussions and accessiblity assessments that having two H1 tags on a single page is acceptable. By acceptable, it is meant that rightfully using double H1s on a page:

It was presented by CRA team on January 9, 2020 and Principal Publisher has formally documented the evidence, February 18, 2020, to support the hypothesis.

Guidance

These scenarios do not represent WCAG failures:

These scenarios do represent WCAG failures:

References