It is fairly common to see Header nesting accessibility errors showing up on your web pages. Understanding why the error is generated in first place will help us fix the error and also make sure we don’t repeat the same mistakes in the future.
There are three rules that we need to follow:
- Rule 1 - Header that follows the existing header can be equal to the existing header
- Rule 2 - Header that follows the existing header can be less than the existing header
- Rule 3 - Header that follows the existing header can be only one level greater than the existing header
Lets look at few examples:.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
Error: Header nesting - header following h1 is incorrect
Generated header-nesting errors are always associated with violating rule 3. This is the case in this example. h1 can be followed by only one level greater heading. Therefore if h1 is followed by h2 then you will not receive an error. However h4 is three levels greater than h1 causing header-nesting error.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h1>Heading 1</h1>
<h4>Heading 4</h4>
No Errors
We are meeting all three conditions. h2 is followed by h2, two equal headings. That is allowed based on rule 1. h1 is less than h2. That is allowed based on rule 2.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h2>Heading 2</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
Error: Header nesting - header following h2 is incorrect
h2 can be followed by only one level greater heading. Therefore if h2 is followed by h3 then you will not receive an error. However h4 is two levels greater than h2 causing header-nesting error.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h2>Heading 2</h2>
<h4>Heading 4</h4>
<h2>Heading 2</h2>
