"Heading elements are not in a sequentially-descending order."

Sandeep C Nath — Sat, 01 Jun 2024 06:49:55 +0000

This is a common a11y error that occurs and is the simplest to fix.
This happens like when we add a <h4> after a <h2> skipping <h3>.

Often when we do the layout we choose elements like h1 or h2 based on the size of the text and not on the context.

While declaring styles if we write,

h4, .h4 {
    some styles
}

Then we can replace the h4 with this <h3 class="h4"> that looks like a h4 and avoid the error.

This way we can stick to what the designer intended and keep the heading sequentially ordered.

This will also help you when you have a banner text with h1 font-size but your actual title with a smaller font-size will be inside the main, in that case just add the class h1 to the banner text and use <h1 class="h2"> for the heading in main.

If you're using hashtag#SASS, the following snippet will eliminate need to specifically add styles for each <h tag>

@for $i from 1 through 6 {
   h#{$i}, .h#{$i} {
     font: 700 var(--h#{$i}) / 1.2 var(--primary-font);
     margin: 0 0 0.5rem;
   }
}

Forem: Sandeep C Nath

"Heading elements are not in a sequentially-descending order."