new audit: hierarchy of headings

[midzer]

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 #7208 (comment) 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? :)

[midzer]

Sry, I did not follow the other thread in detail.

If this new audit already covers "(optionally) The hierarchy of headlines makes sense (e.g. if there's an <h2>, there should be an <h1> beforehand also touches on accessibility, IMHO" we can close this one for good.

Perhaps it is discussable whether to split this h1 audit into individual ones to cover each of the mentioned heading aspects.

[patrickhulce]

Re-reading the full conversation and conclusion in matt's comments, I think it actually concluded that the hierarchy impact on SEO is a myth and the primary value is in a11y. Your point about multiple audits is a good one so let's let this track hierarchy and let that track the core SEO concern of a heading existing :) 👍

[patrickhulce]

cc @robdodson do you have any initial impressions on the a11y value and impact of valid hierarchy of headings? i.e. how bad is it overall, which types of offenses are the most difficult to handle, etc

[robdodson]

Heading order is very important for accessibility. Here's a good post with folks explaining how they use a screen reader to navigate an unfamiliar site. It seems like most folks' go to is to start with headings. If the headings are out of order, then their mental image of the page skeleton will be out of order as well.

It sounds like folks were considering adding the axe heading-order audit but i don't know the status of that. Currently we have a manual check (heading-levels).

[robdodson]

It looks like the axe audit for heading-order just looks at the headings on the page and sees if each heading is >= the heading that preceded it.

I think technically the spec says that headings within sectioning elements can reset their levels, but in practice browsers have not implemented this yet. Jake wrote a post looking into this which provides some additional context.

IMO this could be a valuable audit but I bet it will also be contentious. I think a lot of sites get this wrong. It's especially difficult to do if you're a SPA and you inject in page partials that contain their own headings. That's sort of an unsolved problem at the moment. So this might have a strongly positive impact on accessibility, but there might also be a lot of folks who grump about it.

fyi @brendankenny @connorjclark @mfriesenhahn

[paulirish]

IMO this could be a valuable audit but I bet it will also be contentious. I think a lot of sites get this wrong.

Aye. according to the URLs that @mattzeunert looked at, 28% failed it.

Personally, whenever i've had a tool that complained about this on my documents/pages, I was very reluctant to fix it.

[brendankenny]

FWIW, heading-order plus the existing bypass test gets us most of the way there, though besides a heading element, bypass can also pass with a <main> element or an internal skip link. For the purposes of giving structure, ability to skip interface content, etc, that does get you a lot of why you might require some heading in the page.

[brendankenny]

IMO this could be a valuable audit but I bet it will also be contentious. I think a lot of sites get this wrong. It's especially difficult to do if you're a SPA and you inject in page partials that contain their own headings. That's sort of an unsolved problem at the moment. So this might have a strongly positive impact on accessibility, but there might also be a lot of folks who grump about it.

@robdodson is this referring to heading-order? Cause right now the plan is to turn it on in 6.0...

[robdodson]

@robdodson is this referring to heading-order? Cause right now the plan is to turn it on in 6.0...

Yep. Based on the screen reader survey I linked to it seems like a lot of folks navigate by heading when they come to a new site. But Paul's comment also indicated that developers might be annoyed by it.

My personal opinion is that heading order is really important and I've seen users express frustration when apps have headings that are out of order. I guess the best equivalent I could give would be to imagine looking at a newspaper where the headings were random sizes. It would be really difficult to tell, at a glance, what's important and what's not. That's essentially what folks are doing with a screen reader when they visit a new site and scan by heading.

btw, I just tried to test the rule and...maybe I'm crazy... but it seems to be doing the opposite of what I would expect. Here's a glitch. Currently the headings are out of order but the rule passes. If you put the headings in the right order, the rule fails. It's late in the day so maybe I'm just having a
🧠💨

[patrickhulce]

@robdodson yeah so that glitch illustrates why the check doesn't really make sense to me and why I've been confused by the name. It doesn't care if the headings are going the wrong direction i.e. what I think of as "heading order" (I guess this is necessary to have sections of a page though).

It's confusing to me that the only thing it seems to care about is not skipping levels which makes less sense to me. 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?

[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?