Heading elements are not in a sequentially-descending order

Screen readers have commands to quickly jump between headings or to specific landmark regions. In fact, a survey of screen reader users found that they most often navigate an unfamiliar page by exploring the headings.

By using correct heading and landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technologies.

How the Lighthouse heading levels audit fails #

Lighthouse flags pages whose headings skip one or more levels:

For example, using an <h1> element for your page title and then using <h3> elements for the page's main sections will cause the audit to fail because the <h2> level is skipped:

<h1>Page title</h1>
  <h3>Section heading 1</h3>
  …
  <h3>Section heading 2</h3>
  …

How to fix poorly structured headings #

• Make all heading elements follow a logical, numerical order that reflects the structure of your content.
• Make sure your heading text clearly conveys the content in the associated section.

For example:

<h1>Page title</h1>
<section>
  <h2>Section Heading</h2>
  …
    <h3>Sub-section Heading</h3>
</section>

One way to check your heading structure is to ask, "If someone created an outline of my page using only the headings, would it make sense?"

You can also use tools like Microsoft's Accessibility Insights extension to visualize your page structure and catch out-of-order heading elements.

See the Headings and landmarks post for more information.

Resources #

• Source code for Headings skip levels audit
• Heading levels should only increase by one (Deque University)