Tip for Fixing: Heading elements are not in a sequentially-descending order
This article covers the following Google Lighthouse warning: Heading elements are not in a sequentially-descending order. Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies.
![Screenshot of Google Lighthouse giving the error: Heading elements are not in a sequentially-descending order](/static/0ced5885738f87be4d269ad6791273d0/47a5e/heading-elements-are-not-in-sequentially-descending-order.png)
Obvious fix is to correct the heading element order, but you probably know that already. But what if your heading element is hardcoded into the component?
Let's say you have a note component like this that can be inserted to your blog post at any point:
![Article using H4 heading element for a note in the middle of an article](/static/47ad225eadd4ccef529b02964d8fa73d/3b648/wrong-heading-element.png)
You don't know at which part of the article the note can come in, so you used a H4 just in case. But if the article doesnt have both a H2 and H3 before the note, you will get the Lighthouse warning.
This has a neat fix: instead of a heading, use the <strong>
element!
![Article using the strong element for a note in the middle of an article](/static/c2eab190456473402f6df4b266136935/eb39b/correct-heading-element.png)
By using <strong>
, you eliminate the need for a heading element, but still give semantic importance to the note's heading. Do note that the <strong>
is not a replacement for a heading, but in this case it is better than using an incorrect heading, or even a correct heading. A quick note in the middle of an article does not need a heading.
Another tip: if the note's content is not directly relevant to the article (for an example it is a tip), then you could also use the <aside>
element as a wrapper for the note.