How to fix the error "Improperly Nested Headings"

More info: H42: Using h1-h6 to identify headings


The title of this error may appear slightly different depending on the testing tool used. Some common examples are:

  • Headings nested in landmarks (FAE)

  • Headings must be properly nested (FAE)

  • Ensures the order of headings is semantically correct (aXe)

Video Overview Screen Recording 2022-08-17 at 04.02.09 PM


Key Takeaways:

  • Every page should include 1 (and only 1) H1 tag. This should be the first h tag on every page

  • Document headings should be arranged in numerical order throughout the page (e.g h1 > h2 > h3

  • Headings should never be skipped  (e.g h2 > h4)

  • You should never use a heading tag to achieve a specific style

  • This error may overlap with other errors and so it should be fixed in content where possible before reporting theme issues. 

What to check:

  • Does my page have an h1?

  • Am I Using h tags to style content?

  • Did I omit h1 or h2 tags and go directly to h3 or lower

  • Did I skip heading levels 

FAE example:

Examples

Incorrect 

<!-- ... page hero -->
<div>
  <h4>Some Pre-title</h4> <!-- ? Incorrect because h3 tag preceeds h2. Incorrect because h4 tag is used to style content -->
  <h2>My Title</h2>
</div>
  <!-- ... page footer -->
<!-- ... page hero -->
<div>
  <h2 class="h4">Some Pre-title</h2> <!-- ✅ Correct because headings are in numerical order. We are using the class "h4" to stlye our element-->
  <h3 class="h2">My Title</h3>
</div>
  <!-- ... page footer -->
Was this article helpful?
0 out of 0 found this helpful

Comments

1 comment
  • Great! Thank you. I will be testing tomorrow. Thank you for the link to the ADA information, appreciate that.

    Thanks,

    Sara Anderson 

    0

Please sign in to leave a comment.