Check for correct order of heading tags

[SavvasStephanides]

Headings should be in the correct order See here for more information.

Skipping heading ranks can be confusing and should be avoided where possible

For example, this is correct:

<h1>This is a heading</h1>
<h2>This is a subheading</h2>

This is incorrect because it goes from h1 straight to h3 (skipping h2):

<h1>This is a heading</h1>
<h3>This is an h3 heading</h3>

Not completely sure how this can be done with CSS. I have tried this

h1+h3,
h1+h4 {
    border: var(--checka11y-error-border-width, 5px) solid var(--checka11y-error-color, red) !important;
}

which checks if an h1 heading is followed by an h3 or h4 header. However, this doesn't take into account elements in between the headers. Any ideas welcome.

[jackdomleo7]

I like this idea, but your last point was main concern. It's more common for headings to not be in the same scope. Let me consult @danspratling on ideas for this too. 🤔

[danspratling]

You can use the ~ selector to select "any elements after".

Thinking about how you'd apply this you could do something like

h1 ~ h3 {
  // Error
}

h1 ~ h2 ~ h3 {
  // Remove error
}

Without testing this in actual code though I'm not sure if this is robust enough. Maybe it is, as once an h2 is present an h3 can be placed after it multiple times if required, which this should evaluate correctly.

[jackdomleo7]

Hmm interesting. @SavvasStephanides if you'd like to, feel free to experiment this and see what you can find out? 😊 Or we can pick it up at some point.

[danspratling]

Here's a pen I created quickly which covers how this should work. Seems robust enough to me

https://codepen.io/dan_spratling/pen/xxVBxgK

[alvaromontoro]

That solution could be improved –correct me if I'm wrong– by adding the universal operator in this way:

h2 ~ h1,
h2 ~ * h1,
h3 ~ h2,
h3 ~ * h2,
...

Although it may not be too efficient, it will capture more cases as it considers a more realistic use of the headings in HTML (e.g., headings are rarely at the same level, they are normally within their own container/section.)

Here is a codepen with a demo: https://codepen.io/alvaromontoro/pen/OJNeJwX

[alvaromontoro]

This could potentially be integrated with something similar to what Una Kravets suggested once on Twitter (look at the second tweet as it's more accurate). Her solution targets a slightly different thing (but both cases highlight errors that need to be fixed.)

[danspratling]

Edit: Just read through all this again and I definitely need to stop looking at issues when I'm sleepy!

Both of your suggestions are right. Would you be happy to create a PR incorporating them?

[SavvasStephanides]

@alvaromontoro Thanks for this. I don't know if I'm missing something here but it doesn't seem to catch it when a h4 is defined after a h2 when I test it.

[alvaromontoro]

@SavvasStephanides That's why I mentioned that both solutions targeted different things:

• The one that you suggested works great at searching skipped headings in an incremental way (e.g., when you skip from h2 to h4)
• Una's approach is in the other direction looking for descendant headings of a higher level (e.g., when you have an h1 inside an h2)

They can be combined and they'll highlight wrong headings correctly. The only "issue" is that sometimes they will highlight both sides. E.g., if you have h1-h3-h2, your method will highlight h3, Una's will highlight h2, combining both will highlight h3 and h2... I don't even know if that can be considered an issue at all.

[jackdomleo7]

@alvaromontoro are there any flaws in your proposed CodePen? https://codepen.io/alvaromontoro/pen/OJNeJwX

[alvaromontoro]

@jackdomleo7 I think combining both methods like in the demo works fine. If you want I can pick this ticket (if it's not pre-assigned to anyone)

[jackdomleo7]

@alvaromontoro only if you want to, that'd be great! 😊 If not, don't worry, I was just gathering any missing information.

[alvaromontoro]

Assign it to me then. I'll work on it.

[alvaromontoro]

Found a bug in the demo... Need to add all the possible combinations of * and no-*. The rule is big and bugly, but now it seems to work fine.