Headings (this is an H1)

2. Use Headings to Create Structures (this is an H2)

Headings in content allow readers to organize chunks of content and to navigate the content.

Sighted users benefit from content has been visibly grouped by headings. These may be marked with a consistent change in size, font, color or positioning, and they should form a coherent outline: subheadings (H2) break up the page into minor groups, and may contain one or more subsections with sub-subheaders (H3), and so on:

  • H2
    • H3
      • H4
    • H3
  • H2
  • H2

Not only does this make it easier for users to find what they are looking for, it also aids in comprehension and reduces cognitive load, by letting users focus on the section most relevant to their needs, rather than painstakingly combing through a wall of text.

Screen readers offer that same of functionality: a non-sighted person can pull up a list of headings via their screen reader to navigate a document like an interactive table of contents, including the outline level. In fact, the majority of screen reader users say skimming for headings is the first thing they do when they open a Web page.

Manually formatting text to look like headings, by changing the font size or boldness, does not offer a programmatic equivalent to the non-sighted person using a screen reader. This denies them the ability to programmatically scan the content, and make it much less likely they notice important content.

Best Practices (this is an H3)

  • Format your headings as "real" headings using the tools provided by your text editor
  • Do not use manual formatting (bold, font size overrides) to create "fake" headings
  • Do not skip heading levels; if you were to imagine your headings as a nested list, the number should match its amount of indentation (i.e., jumping straight from H2 to H5 would be weird; H2s should contain H3s, which might contain H4s, and so on)

Don't do This (H2)

Scenario One: Manually Formatted Headings (Bold)

The text above 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.

Scenario Two: Breaking Hierarchy (H3)

This should be an H4, but it is an H5

When you are selecting styles for headings, it is important to 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.

Do This

Scenario One: A Real Heading (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.

Scenario Two: Maintaining Hierarchy (H3)

This sample conveys its nesting structure both visually and programmatically.

Note that this explanatory text is above the sample headers: if it was below them, it would appear in the document outline as part of "A nested section of the above nested section (H5)," rather than the explanation for "Scenario Two."

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