6.5 Heading levels should be properly nested

If you think of the headings on a page as the outline of the content, each heading level acts as a new indentation. An h2 insinuates that it is a sub section of the h1 above it, an h3 a subsection of the previous h2, and so on. A screen reader user can then use commands to go to the next heading of a specific level and skip large pieces of content. If heading levels aren't logical it will be less clear as to the organization of the page and a user may feel like they have missed content.

WCAG 1.3.1: Info and Relationships Opens in a new window

Details

  • Every page should have one h1, which should be at the top of the main content.
  • Sub sections should increase by one heading level. Occasionally there are exceptions to this when the main content is not the first thing in the focus order.
  • See 9.5 Heading structure should be consistent

Examples

Correct nesting

<h1> Main Heading <h1>
Indent <h2> Sub Heading <h2>
Indent Indent <h3> Sub Sub Heading <h3>
Indent <h2> Sub Heading <h2>
Indent Indent <h3> Sub Sub Heading <h3>
Indent Indent <h3> Sub Sub Heading <h3>
Indent Indent Indent <h4> Sub Sub Sub Heading <h4>

Exception to rule

Headings on an example search results page that skip from h1 to h3

Tips

  • CSS can be used to change the default appearance of each heading tag.