Headings

Overview

Headings create important structure for a web page, allowing readers to browse content by topic. 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 page. Headings allow screen reader users to listen to a list of the headings and skip to topic they want.

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