WCAG 2.4.10 — Section Headings

What this requires

Section headings must be used to organise content. A heading is an <h1> through <h6> element introducing a section of the page; the sequence must form a logical outline of the content. The criterion applies where the content is naturally structured into sections — articles, documentation, long-form pages. It doesn't demand headings on every page or in every list.

How AI coding tools fail this

When asked to "lay out this article" or "render the blog post", AI tools use visual styling (font-size, font-weight) on <div> and <p> elements to create the look of a heading without the semantics. The result reads correctly visually and contains no landmarks for keyboard or screen-reader navigation.

The second pattern: skipped heading levels. The page goes <h1> → <h3> → <h2> → <h4> in an order that matches design emphasis, not document hierarchy. Screen-reader users navigating by heading lose track of structure.

The third: headings used purely for visual styling — a bold "On sale this week" label given an <h2> because it should look big, while real section content uses styled divs. Headings are an outline, not a font size.

Failing examples

Visual headings without semantics:

<div className="text-2xl font-bold">Background</div>
<p>{backgroundCopy}</p>

<div className="text-2xl font-bold">Methodology</div>
<p>{methodologyCopy}</p>

Skipped levels:

<h1>Annual report</h1>
<h3>Background</h3> {/* should be h2 */}
<h2>Methodology</h2> {/* now out of order */}

Passing examples

A proper heading outline:

<article>
  <h1>Annual report</h1>

  <section aria-labelledby="background-heading">
    <h2 id="background-heading">Background</h2>
    <p>{backgroundCopy}</p>
  </section>

  <section aria-labelledby="methodology-heading">
    <h2 id="methodology-heading">Methodology</h2>
    <p>{methodologyCopy}</p>

    <h3>Sampling</h3>
    <p>{samplingCopy}</p>

    <h3>Analysis</h3>
    <p>{analysisCopy}</p>
  </section>
</article>

Edge cases

AAA scope. The criterion is AAA. AA-targeting projects need good headings too (1.3.1, 2.4.6), but the explicit "section headings are used" requirement is AAA.
Don't invent headings. If a page genuinely is a single short statement, it doesn't need section headings.
One <h1> per page is the common convention. The HTML5 spec allowed multiple <h1> within <section> elements, but screen readers haven't followed; treat one <h1> per page as the rule.
Skipping levels (h2 → h4) breaks heading navigation.
Heading text should describe the section (2.4.6), not just label its position.

How Jeikin handles this

axe-core flags skipped heading levels and pages with no <h1>. For the broader question — "is the page structured into sections with headings where structure exists?" — the dashboard runs a guided review that walks the heading outline and asks the reviewer to confirm coverage.

References

W3C — Understanding 2.4.10 Section Headings (opens in new tab)