Screen reader users can use heading structure to navigate content. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers and by search engines.

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.

Examples of proper use of headings:

  • Use <h1> for the primary title of the page. Avoid using an <h1> for anything other than the title of the website and the title of individual pages.
  • Use headings to indicate and organize your content structure.
  • Do not skip heading levels (e.g., go from an <h1> to an <h3>), as screen reader users will wonder if content is missing.

Contact 1-Stop Design Shop to create your website design.