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:
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
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.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.