Skipping heading levels is bad for accessibility, except...
[!tldr] TL;DR Avoid skipping heading levels for visual appearance. It could be justifiable in some cases, such as a site-level sidebar.
HTML has six levels of heading elements, <h1> to <h6>. They are used by screen readers—and in some cases search engine bots—to indicate a document's semantic structure.
Skipping heading levels mean using them not in order, usually because we want a visually smaller font size.
The WAI guide advises against skipping heading levels, with an explicit exception for fixed page sections:
In fixed sections of the page, for example in sidebars, the heading ranks should not change depending on the ranks in the content area. In those cases, consistency across pages is more important.
Example:
<main>
<h1>Page heading</h1>
<!-- content -->
<h2>Section heading</h2>
<h3>Subsection heading</h3>
<h3>Another subsection heading</h3>
<h4>Subsubsection heading</h4>
<!-- /content -->
</main>
<nav>
<!-- This should be an h2 regardless of
the page content's nested section levels -->
<h2>Sidebar heading</h2>
<!-- sidebar content -->
</nav>With the same shell/layout template, another page may look like this:
<main>
<h1>Page heading</h1>
<!-- content -->
<!-- (no sections/subsections on this page) -->
<!-- /content -->
</main>
<nav>
<!-- Still an h2 -->
<h2>Sidebar heading</h2>
<!-- sidebar content -->
</nav>In support of the exception above, this article argues that enforcing the "no skipped headings" rule for patterns like a site-level sidebar will cause "workarounds", eg. using caption instead of heading element in sidebars, that create worse accessibility issues.
it is impossible to construct any kind of argument or provide any kind of evidence to show that they are always so
a blanket ban will create accessibility problems that wouldn’t otherwise exist
Bear in mind that guidelines and tools may not be aware of this exception, eg. Google Lighthouse will show a warning to use proper heading order regardless of usage context.