Is it OK to skip heading levels

Question

I've always frowned upon skipping heading levels in HTML documents, especially for reasons of screenreader accessibility. Additionally the requirement that a page's structure makes sense without CSS seems to indicate that skipping heading levels is not advised. For example:

<h1>...</h1>
<h3>...</h3>
<h4>...</h4>

A coworker claims that this is fine if the relative importance of the content is reflected in the heading markup. I suppose he could be right.

Thoughts from accessiblity experts?

Bickart

It would be better to post this question on the User Experience site, at ux.stackexchange.com – Childers

I'm not an "accessibility expert", but what happens to the missing levels? Are they somehow accounted for? Not? I suspect it's not so simple in practice. – Jacobjacoba

Answer 1

I believe skipping heading levels was considered acceptable but not ideal under WCAG1, but WCAG2 is stricter in this regard. As one example, screen readers will announce the heading level and the skipped number would make it seem like the user had missed some hidden content when they haven't. There shouldn't be any need to skip a level if CSS is used to style the way you'd like.

Minnick

Answer 2

From WCAG 2: G141: Organizing a page using headings:

To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).

Huzzah

Answer 3

This topic came up in a WebAIM presentation I attended recently and they recommended you not skip heading levels. Their reasoning was that screen readers typically offer a shortcut that brings up a list of all headings within the page as a means of user navigation.

The scenario they described was that if a person using a screen reader was cycling through the headings (ex. h1, then h2's then h3's) and the reader reported nothing for a given level of heading (h4's in this case), then the user would likely stop cycyling through the headings under the assumption that there are no more headings (potentially missing any h5's and h6's).

So, in effect, you risk creating a usability problem if you skip levels!

Ganymede

I wonder how that works with HTML5 where heading levels reset every time you use a <section>, <article>, <fieldset> or any other sectioning content. – Evyn

Answer 4

In short, there is no automatic WCAG failure for skipping heading levels.

That said, as the others here have pointed out, it is not recommended. From the WCAG 2.2 specs:

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.

Notice "where possible" (emphasis mine).

A couple links explaining more about this advice and some examples of when it might not hold: https://accessible-digital-documents.com/blog/the-skipped-headings-myth/ https://www.tpgi.com/heading-off-confusion-when-do-headings-fail-wcag/

Earnest