Using headers for on page organization

Using headers on your page are important for individuals using screen readers. They show hierarchy and continuity and promote mental organization of ideas.

Benefits of proper organization

  • creates fluid transition
  • helps create hierarchy for content grouping
  • improves scannability

Heading dos and don'ts

  • Do: Use headings in number order. They should be used as an outline.
  • Do: Use descriptive and relevant headings. Headings should be able to stand on their own without context.
  • Don't: Skip a heading number. Using multiple of the same heading (aside from Heading 1) is okay as long as they do not skip as you move down the page. Going from heading 4 to heading 2 is okay, but not vice versa.
  • Don't: Use a heading specifically for the styling. Accessibility is more important than how it looks.

How to organize when using a masthead

When not using a masthead, the top heading text should be set to Heading 1. It should clearly describe the content on your page. When including a masthead with a heading, the first heading in the main content should be Heading 2. Continue with the page content as normal.

Heading hierarchy example

When writing content, plan your headings and hierarchy accordingly. You do not need to follow the example below, but instead tailor the heading accroding to your content.

  • Heading 1
    • Heading 2
      • Heading 3
      • Heading 3
        • Heading 4
    • Heading 2
    • Heading 2