There should be only one H1 heading on a single page

Question

• I was told by the accessibility team that there should be only one H1 on a single page.

• Ref on the internet: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page

• Then I saw this implementation in one of our repos.

<h1 tabindex=0 style="invisible">The website name</h1>
<h1 tabindex=-1>form 1</h1>

• Is this incorrect implementation? (or is it a workaround?)
• For normal people, the focus will be on "The website name", but invisible. He/she will tab to next focusable item. (form1 skip)
• For people who using screen reader, "The website name" will announce and focus there, tab to next focusable item. (form1 skip)
• Should we change to form1 to h2 ?

Answer 1

No, is not the correct workaround the web had to be semantic. You have to use only one h1. If you do that web spyders for browser positioning will work better and it will be clear to accesibility tool. The best workaroun is make the second title a h2 or include the two tags in one h1 and separate it with another tags inside the h1

Answer 2

It is recommended to have only one H1 heading per page for the purpose of clear and meaningful structure. It's important practices and standards can evolve search engines trying to understand the content. Having multiple H1 headings may confuse search engines and dilute the focus of your page. By using a single H1 heading, you can optimize your page for a specific keyword or topic, helping search engines understand the content better and potentially improve your search rankings.

Answer 3

It's a best practice but not a requirement to have a single <h1>.

Whether that affects search engines or not is debatable. Whether that affects users or not is debatable.

If you run an accessibility scanning tool, it might flag multiple <h1> elements as an issue to review but won't mark it as an error.

Your code example that has tabindex on an <h1> is a bad practice. You do not want to have focusable elements that are not interactive. The user can't click on or select the <h1> so it should not have a tabindex. There's no need to make a heading focusable. Assistive technology users, such as screen reader users, can navigate to headings using a variety of shortcut keys built into the screen reader. They do not have to tab to the heading.

Answer 4

Having only one or allowing multiple H1 on the same page is a long standing debate. Most people nowadays agree that, effectively, it's better to have only one H1.

From a screen reader user perspective, however, the most valuable H1, the one you should keep, is the one which is located right before the main content and which represent the specific title of the current page.

An H1 for the site or company name is most of the time much less useful. It allows to quickly go back to the home page, well, but that's probably not the most useful feature, especially if the core of your site is to read articles or browse products to buy. It's much more important to find out quickly the title and contents of the current article or product description.

Having an unique H1 for a specific page title is also simpler to navigate than an H1 for the site/company name and an H2 for the real title of the page.

Ideally you should think about users first rather than about machines. If all sites do what's good for users, search engines will adapt. The opposite isn't true.