Sequential headings

Back to the a11y checklist

Why it matters

Web pages often have sections of information separated by visual headings to communicate the organization of the content on the page. To make these work for web browsers, plug-ins, and assistive technologies, the headings need to be marked up. That way people can navigate from heading to heading, use the headings to understand the overall organization of the page content and the purpose of each section — including people who cannot use a mouse and use only the keyboard, or screen readers.

WCAG 2.0 reference: 2.4.10 Section Headings

Code example

<div class="page">
    <h1>Page Header</h1>  

    <div class="child1">
      <h2>Child 1 Header</h2>

      <div class="grandchild1">
        <h3>Grandchild 1 Header</h3>
      </div>
    </div>

    <div class="child2">
      <h2>Child 2 Header</h2>
    </div>
</div>

Don’t

• There should only be one h1.
• An h4 element should not appear on a page before an h3 element.
• Don’t jump from a h2 to a h4, skipping a h3 element. If heading levels are being skipped for a specific visual treatment, use CSS classes instead.

How to check for this

1. The page has a heading. In almost all pages there should be at least one heading. Automated
2. All text that looks like a heading is marked up as a heading. Manual
3. All text that is marked up as a heading is really a conceptual section heading. Manual
4. The heading hierarchy is meaningful. Ideally the page starts with an “h1” — which is usually similar to the page title — and does not skip levels; however, these are not absolute requirements. Manual

Collaborators

• Designers

Resources

• W3C page structure tutorial
• Video tutorial: How I do an accessibility check on the page structure
• How to check headings
• Using h1-h6 to identify headings
• Semantic structure