A collection of tips, guidance and practical suggestions in developing accessible websites
There have been various discussions in web development circles about whether we can skip heading levels for various reasons, including structural consistency.
One of the benefits of a proper and consistent heading structure in an HTML page is that they can be repurposed to improve access to the content. For example, the heading structure could be extracted into a Table of Contents or an outline, providing in-page navigation or overview.
Screenreader users have header navigation, which allows them to go through the document on a header by header basis. It’s not perfect, but its very useful to find a piece of information quickly. The screenreader exposes a means of navigation to next or previous headers of a particular level, so a visitor can, for example, jump to the next second-level heading. So far there’s no indication of what header levels are available unless the user enquires.
This means that if heading levels are skipped they may not be found by a screen reader user. For example, if a screenreader user is navigating down the second level headings (h2), and finds one that comes close to what he’s looking for, he may elect to navigate through the third level headings(h3). If this level is skipped in the header structure, the user will be informed that there are no third level headings. Without third level headings, the expectation is that there will be no fourth, fifth or sixth level headings there either. So those headings will typically not be found by a screenreader user.
Skipping a header level makes navigating by headers less usable for screenreader users.
Depending on a screenreader and screenreader user. My opinion always was that skipping headers is legal if it makes sense.
While it may be legal (in that, if levels are skipped in a web page with strict doctype, the page validates), it is not recommended for the reasons stated above. A web developer has no control over what screen reader is used and certainly does not know who the user is. Thus I agree with this article that one should avoid skipping header levels for reasons given.
As a web designer and developer, this is something I hope screen readers will fix. Document headings are often applied differently from document outlines. That is, semantically, document headings specify importance on an absolute and universal scale, whereas outline levels only assign importance on a relative/local scale. So you’d naturally never skip levels in a document outline; however, it’s very unnatural _not_ to skip levels in document headings.
For example, I may have a contact page that has Contact Us and Sales and Support. I may also have a product page that’s split into Community and Enterprise. On both these pages, the subheadings indicate the primary division of the document, and they should be assigned the second-highest heading level used across the site. Semantically, the two pairs of headings are of equal significance.
However, I may have a 3rd page titled Our Methodology which contains a subsection called “Further Reading”. Now, the Further Reading section belongs directly under the h1 heading, but it’s certainly not appropriate to give it the same semantic significance as the h2s mentioned earlier. Likewise, you may have other modules on the page, such as a newsletter subscription box, that requires a heading, but again would be inappropriate to assign it an h1 or h2.
In fact, this very page demonstrates the problem with treating headings the way you describe, as the ToC for this page would put “# Responses to…” and “Add a comment or reply” as subsections of “Barriers in skipping headers”.