Most screen reader users tend to navigate a page that they are unfamiliar with by looking for headings on the page. Screen readers have the ability to navigate using quick navigation hotkeys so they can get to heading level 1 through 6 types quickly and efficiently. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers. Be sure to adhere to the correct order of headings, and separate presentation from structure by using CSS (Cascading Style Sheets). Do not pick a header just because it looks good visually (which can confuse screen reader users); instead, create a new CSS class to style your text. Here are some basic guidelines for the use of headings:
- Try to limit your use of the <h1> tag to the title of the page.
- Use HTML headings to organize the structure of your page. ARIA landmarks should also be considered.
- Do not skip heading levels. Skipping a heading level may confuse the screen reader user when navigating the site. This page you are viewing is a good example of the proper use of headings.