Effects of changing heading tag for related post

[kulbhushanchand]

Presently the related posts section have h4 tag. When the post contents does not have a h3 heading the lighthouse gives SEO suggestion as below

I can change it to h1 and h2 as a workaround.
Is it intentional to kept the section heading at h4?
Is my workaround good enough and semantically correct?

[kulbhushanchand]

After some research, I found there should be only one h1 as a good practice.
So, in the theme, the h4 of the related posts section can be replaced by h2 for the lighthouse SEO suggestion.
Speaking of why original theme uses h4 for related posts section, I don't know.

[ryan-p-randall]

Are the <article> and <div> tags announced by all screen reader programs? I don't see aria-labelledby anywhere, which I think is necessary to expose these to screen readers.

The simplest solution is usually to have the heading elements carry a logical order.

[mmistakes]

@iBug is right, the h4 is likely more of a decoration thing that came from an older version of the theme before some work was done to make the HTML more semantic and accessible.

There definitely are accessibility and SEO concerns when headings aren't marked up in order, but I'm not sure how big of an issue it is when said heading falls outside of the main content... it's technically outside of <article> and treated more as an aside.

I don't have a strong opinion leaving it as is or replacing it. If it can be switched to a <h2> as @ryan-p-randall suggests and styled so it matches how it looks now... I'm cool with that.

[kulbhushanchand]

@mmistakes @ryan-p-randall
There is no need for additional styling since the class for related post already provides the smaller font size.

[mmistakes]

Happy to review a PR if someone wants to tackle this change.

[kulbhushanchand]

Hi @mmistakes,
I have submitted the relevant PR.