Accessibility rule: Page does not start with a level 1 heading, explained
A level 1 heading <h1> tells the user what the page is about before they decide to navigate through the content. Headings are used to structure content into a hierarchy of importance. If a page starts with a different heading level, it can cause the user to wonder if the heading structure is accurate, and if they miss some essential information.
Who is impacted by this barrier?
Individuals who are blind or visually impaired often choose to browse a webpage by headings. This gives them an idea of what is on the page, and what content on the page is most important. The first heading <h1> should be the most important heading on the page and should describe the topic of the main content.
Navigating through headings with a screen reader is a far quicker process than reading a page line by line or even link by link. It’s similar to how other users would visually skim through the headings to get an idea of the main topics. Furthermore, heading tags assistive technology users to understand how content is structured.
How does the rule work?
The rule checks that in each document the first heading has a level of 1.
A frequent case of failure of this rule is when a chat widget including an <h2> has been added at the start of the document even if the widget appears at the bottom right corner of the page. While other content may be correctly structured, in this case it would be the script adding the chat widget that breaks the intended heading structure.
This rule is not required for conformance to any accessibility requirements. Read more about the rule in the technical documentation here.
How to fix the issue?
When adding heading tags, you should ensure that they follow a nested structure. <h1> is the first heading used for the primary information on the page followed by <h2> for subheadings, and so on. Correcting your heading structure may also help to improve your site's SEO.
Did you find it helpful?Send feedback