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?

Answer 1

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!

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.).

Answer 3

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.