-
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 ?
2
Answers
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
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.