Avoid skipping header levels

There have been various discussions in web development circles about whether we can skip heading levels for various reasons, including structural consistency.

Repurposing headers

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.

Barriers in skipping headers

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.

Signpost forms with headers

The typical websites of today commonly have small forms in various locations on the page. These forms could be logins, subscribing to mailing lists, site search, blog comment form; they are ubiquitous because they tend to cover important use cases on a site.

It makes sense to inform screenreader users of these forms - particularly login and search, because they form an important part of getting things done on the site, or navigating to a personalised part of the site.

For that reason, preface all of these forms with a header. This allows screenreader users to use headers as a way of navigating all the elements in the page. Make the header text descriptive, for example "Login to your account", or "Search this site". It would be better to integrate these headings as part of the design, but they can be hidden by positioning it off-left if needed.

It's more natural for this heading is placed before the start of the form, outside the opening form tag. That way a screenreader user can find the relevant header in heading navigation mode, and when they switch back to the normal page navigation mode the first thing immediately after the header is the form.

Ensure that the heading level makes sense in the document structure, and don't skip a heading level. Use an h2 header for forms that appear before the h1 header; there ideally should be only one h1 header per page.