Manually check that headings don't skip levels

Screen readers users 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 assitive 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>
<section>
<h2>Section Heading</h2>

<h3>Sub-section Heading</h3>
</section>

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.

More information

Last updated: Improve article