Heading the right direction in your content

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 and documents will be well-organized and easily interpreted by screen readers. Be sure to adhere to the correct order of headings. For websites, 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.
  • 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.
  • For documents, use the built-in style structure which applies heading styles. This document style information is typically found in the same area where you select font, font size, etc.
  • For websites - Use HTML headings to organize the structure of your page. ARIA landmarks should also be considered.

Resources