Heading elements are not in a sequentially-descending order
"Heading elements are not in a sequentially-descending order" essentially, means that your webpage has heading elements (h1, h2, h3, etc.) that are not in a sequentially-descending order, which can make it difficult for users, especially those using screen readers, to understand the structure of the content.
How to fix it
The solution is to order your heading elements sequentially. Here's how:
Step 1: Identify Non-Sequential Heading Elements
First, you need to identify the heading elements that are not in a sequentially-descending order. You can use Chrome DevTools for this. Open DevTools, go to the 'Elements' tab, and look for heading tags in your HTML that are not in order.
Step 2: Order Heading Elements Sequentially
Once you've identified the non-sequential heading elements, you need to order them sequentially. This means ensuring that h1 is followed by h2, h2 is followed by h3, and so on.
<!-- Before -->
<h1>Main Title</h1>
<h3>Subsection</h3>
<!-- After -->
<h1>Main Title</h1>
<h2>Subsection</h2>
In this example, we've changed an h3 tag to an h2 tag to ensure the heading elements are in a sequentially-descending order.
Step 3: Test Your Changes
For an even better solution, consider testing your changes to make sure they don't break any functionality. This can help ensure that your site still works as expected with the reordered heading elements.