According to the HTML5.1 spec, as outlined in the link below, every page should only have one h1 element. Naturally, I feel that the h1 element on the homepage should be a title describing the website itself. This raises the question, how do you correctly deal with h1 headers on subpages if the h1 element used on the homepage is used in header?
For instance, let's assume we are building a website for Adam's Sweet Shop, we create the layout and we create our header:
<header>
<h1>Adam's Sweet Shop</h1>
...[other header elements]
</header>
Now, that works fine for the homepage. But as we delve into the subpages, we are left with two options. We create a different h1 element describing that page and delegate the header h1 into a different tag. This would seemingly satisfy the requirements of the HTML5.1 spec, but it almost seems 'hacky', plus for templates this would require two different header files.
The second option is to create two h1 elements, one describing the website in the header, the other within the main element describing the page.
<header>
<h1>Adam's Sweet Shop</h1>
...[other header elements]
</header>
<main>
<h1>About Adam's Sweet Shop</h1>
...[other body elements]
</main>
This obviously goes against the HTML5.1 spec, but seems less hacky. I originally built a site using second approach, but received a warning message from the W3C validator.
Are either of these approaches correct, and if not, what is a better approach, for instance, an ARIA label describing the 'real' h1?
https://www.w3.org/TR/html51/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements
If it works better in your site design to have an h1 in the header and another h1 in the main, then that’s what you should do. Neither the canonical HTML spec nor the W3C copy of it say you shouldn’t use more than one h1 element per document if that’s what meets your needs. And the W3C HTML checker won’t report any errors or warnings for the markup example in the question.
As far as any accessibility concerns, it’s true screen readers will report both those h1 headings as being at the same (top) level, but that also seems appropriate for this particular case—it isn’t an absolute problem to have a couple top-level headings. (Though in contrast it would be a problem for screen readers if you marked up every section in your entire document with an h1—and that’s why the HTML emits warnings for that case (which is very different from your case).