new audit: hierarchy of headings

Feature request summary

According to https://www.w3.org/WAI/tutorials/page-structure/headings/#heading-ranks “Skipping heading ranks can be confusing and should be avoided where possible: Make sure that a <h2> is not followed directly by an <h4>, for example.”

So, we might want to evaluate this structure on a page.

With additional support by core lighthouse developers I would love to spent time working on this new audit.

What is the motivation or use case for changing this?

• Improve Accessibility
• SEO tools like https://www.advertising.de/oneproseo/seo-site-check/ recommend a good hierarchy of headings, too

How is this beneficial to Lighthouse? Another helpful audit under Accessibility or SEO

Have a nice week midzer

[patrickhulce]

Thanks very much for filing @midzer! I think https://github.com/GoogleChrome/lighthouse/issues/7208#issuecomment-470996275 might cover this situation you describe. If so, let’s close this in favor of that. If not, maybe explain a bit how it’s different? 😃

[robdodson]

Does going from an h1 to h3 really throw off the understanding of the page? I feel like I’ve done this intentionally when the content I’m sticking into a heading isn’t really a direct subchild of the h1 and it is really a lower grandchildlike concern, but maybe that’s really bad practice?

I think technically you’re not supposed to do that. There should be an h2 between that h1 and h3. In theory the flow would be like:

h1
  h2
    h3
    h3
      h4
  h2
    h3
  h2

If the audit is only checking that you aren’t skipping heading levels then it seems like it should be renamed… @WilcoFiers any thoughts on this?