Design decision 12 - Double H1 on a single page
Summary
- Author: @GormFrank
- Expert: @duboisp, @bsouster, @namjohn920, @GormFrank
- Status: Approved but subject to be reviewed
- Last updated: 2020-09-11
- History:
- (2020-12-15) New development to standards and need to be reviewed and addition of related Pull Request as reference.
- (2020-12-02) Added reference to research 2020-37
- (2020-09-11) Put working example in HTML code and not as rendered HTML
- (2020-09-10) Approved at the WET roadmap meeting
- (2020-07-17) Add working example
- (2020-07-13) Presented at the roadmap meeting
- (2020-06-30) Initial draft
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:
- will not make you fail WCAG2.1 AA, as per an accessibility assessment led by the Accessibility, Accommodations & Adaptative Computer Technology (AAACT) Program team on February 26, 2020;
- has the potential to improve your Search Engine Optimization (SEO) performances, as per a research led by the Principal Publisher team updated on February 18, 2020.
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:
- A lack of headings (unless you’re striving for Level AAA)
- Missing “h1”
- More than one “h1”
- Skipped heading levels
- Multiple headings with the same text
These scenarios do represent WCAG failures:
- Heading-like text that isn’t marked up as headings
- Illogical heading order
- Nondescriptive headings
References
- GC-Subway: Stabilizing GC-Subway pattern - PR#2058
- 2020-33 - Analysis of double h1 impact on search result
- 2020-37 - Review of improved Service initiation template discussion before March 2020
- Quick test with adaptive technology for double H1’s (2020-37) - 2020-02-27
- Discussion - Design pattern to identify and have a consistent navigation for a set of related pages about a common task
- Evaluate the accessibility conformity of the Canada child benefit apply page of Canada.ca
- Heading off confusion: When do headings fail WCAG?
- HTML 5 specifications for headings