Why is this important?
To facilitate navigation and understanding of the overall page structure, authors should use headings that are properly nested. Example: h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, and so on. Heading elements that are properly nested help users of assistive technologies understand the structure of the information on the web page more easily.
How can I resolve this issue?
Review the arrangement of headings on your page starting from the first available one to the bottom of the page. If you have skipped a heading such as using Heading 2 <h2> then using Heading 4 <h4> consider changing Heading 4 <h4> elements to Heading 3 <h3> and so on so that the arrangement of headings is in order.
Additionally if you start the page with a Heading 2 <h2> then have a Heading 1 <h1> coming in later on the content, consider having Heading 1 <h1> placed first instead of Heading 2 <h2>
Keep in mind when you are starting a new page to review the content and have Heading 1 <h1> as the first heading available on the page. You can then look into splitting the page by subsections and using Heading 2 <h2> for each of these areas. If some areas inside heading 2 can be split further you can use Heading 3 <h3> and repeat this process as needed from <h4 to <h6>.
What topics do this checkpoint affect?
- Accessibility (WCAG 2.1 Level A, SC 2.4.10)
Can you explain how this checkpoint works?
This checkpoints ensures headings <h1> through to <h6> are present and that they follow the correct order.
Acceptable:
<h1>
<h2>
<h3>
<h3>
<h2>
<h2>
<h3>
<h3>
Not acceptable, skipping headings:
<h1>
<h4>
<h2>
<h3>
<h4>
Not acceptable, incorrect order, Heading 1 comes after Heading 2:
<h2>
<h1>
<h2>
<h2>
In general the rules to ensure compliance are:
- Headings must follow the numerical order (1 to 6) with no skipping in between.
References
Understanding Success Criterion 1.3.1: Info and Relationships
Using h1-h6 to identify headings
Organizing a page using headings
