Headings Create the Page Outline

Headings allow readers to browse content by topical groups, and provides context for users working through lengthy content. Users are much more likely to discover topics of interest if they are marked with a heading.

This structure is especially important for screen reader users. The majority of screen reader users say skimming for headings is the first thing they do when they open a Web page.

If "normal" text is only formatted to look like a heading, e.g., by making it bold, it will not appear in this list, making it much less likely screen reader users will notice the content exists.

The numbers ("Heading 2") are meaningful: they indicate how "indented" each heading should be when the devices organizes them into a navigable list.

Here is the actual outline for this page, with the numbers made visible as indents:

  • H1 (article title): Headings Create the Page Outline
    • H2: Common mistakes
      • ...
        • ...
          • H5: Broken hierarchy
    • H2: Good page structure
      • H3: Real headings
      • H3: Maintaining hierarchy
        • H4: A nested section
        • H4: Another nested section
          • H5: A nested section of the above nested section
    • H2: Testing for Accessibility
      • H3: Test
      • H3: Exceptions
      • H3: Applicable WCAG Success Criteria
      • H3: Resources

Common Mistakes (H2)

Fake Headings (bold text)

A line of bold text might look like a heading, but it will not appear in the content outline, so screen reader users cannot tell that it is important or jump to its content. Its visual weight is also "wrong" for the site design; users would expect a much heavier heading for this break in the content.

Broken Hierarchy (H5)

When you are selecting heading levels, maintain an outline-like hierarchy. This lets your site's visual styles work as designed without large jumps in visual "weight," and does not put screen reader users in the confusing place of wondering if they somehow missed an important, intermediate section:

  • H1: "Headings"
    • H2: "Common Mistakes"
      • ??? nothing at this level
        • ??? nothing at this level
          • H5: "Broken Hierarchy"

Good Page Structure (H2)

Real Headings (H3)

The text above was marked as an H3; it automatically appears with the appropriate visual styles, and appears on the document outline so screen readers can jump straight to its content.

Maintaining Hierarchy (H3)

The headings below convey a nesting structure, both visually and programmatically.

Worth noting: this explanation was placed above the sample headers for a reason: if it was below them, it would appear in the document outline as an explanation for "A nested section of the above nested section," rather than "Scenario Two: Maintaining Hierarchy."

A nested section (H4)

Another nested section (H4)

A nested section of the above nested section (H5)

Testing for Accessibility

Test

Use this headings bookmarklet or automated testing tool like WAVE to discover headings on a page.

  1. Do all visually formatted headings have a semantic h-tag?
  2. Do headings nest in outline level hierarchy properly?

Exceptions

None

Applicable WCAG Success Criteria

Resources