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 -->
Comments
Great! Thank you. I will be testing tomorrow. Thank you for the link to the ADA information, appreciate that.
Thanks,
Sara Anderson
Please sign in to leave a comment.