Headings don't skip levels

Headings don't skip levels


Users of screen readers and other assistive technologies often navigate an unfamiliar page by exploring headings. By using the correct headings, you can dramatically improve the navigation experience on your site for users of assistive technology.

How to manually test #

To check headings don't skip levels, make sure all headings follow a logical, numerical order. For example:

<h1>Company name</h1>
<h2>Section Heading</h2>

<h3>Sub-section Heading</h3>

Use this list of landmark elements to check your page. Click the "Show Headings" button to see a structural outline for the page.

How to fix #

Use headings to create a structural outline for your page. Create a skeleton or scaffold of the page such that anyone navigating by headings can form a mental picture.

Don't skip heading levels. Look out for an <h1> heading followed by an <h3> heading. It is an anti-pattern to skip heading levels to use the browser's default heading styles. Fix any skipped heading levels and use your own CSS for styling.

Learn more in Headings and landmarks.

Resources #

Source code for Headings don't skip levels audit

Last updated: Improve article