Accessibility issue guide · page structure

Make the heading outline match the content hierarchy.

ClearSite can flag skipped heading levels and show the affected element. A person must still decide whether the headings describe and organise the page clearly.

Check a page's headings free No signup. Test the rendered page.

Structure, not styling

Heading rank should explain how sections relate.

Headings create a programmatic outline that browsers and assistive technologies can use for navigation. An h3 normally represents a subsection beneath an h2; it is not simply a smaller-looking title.

A skipped level is a useful best-practice signal, not automatic proof that a page fails WCAG. The broader requirement is that structure and relationships are programmatically available, while descriptive headings also help people orient themselves.

Primary guidance: the W3C WAI headings tutorial and WCAG 2.2 explanation of information and relationships.

Controlled fixture · axe-core 4.11

One skipped level. One source-level repair.

We tested the same short outline with axe-core's heading-order rule. An h1 followed by an h3 returned one moderate finding. Replacing the h3 with the correct h2 returned zero violations for that rule.

Before · moderate finding

The outline jumps from h1 to h3

<h1>Accessibility report</h1>
<h3>Images</h3>

After · rule clear

The section follows the page heading

<h1>Accessibility report</h1>
<h2>Images</h2>

This is a controlled fixture, not customer evidence or a conformance claim. The rule is documented as a Deque best practice in the axe-core heading-order explanation.

Four repair patterns

Build the outline first. Style it second.

Use rank for structure

Choose h1 through h6 from the content outline, not from the text size you want. Use CSS for appearance.

<h2 class="text-sm">Shipping details</h2>

Nest subsections one level down

A subsection of an h2 normally starts with h3. A new peer section returns to h2.

<h2>Delivery</h2>
  <h3>UK delivery</h3>
  <h3>International delivery</h3>

Keep headings descriptive

A technically ordered outline can still be unhelpful. Each heading should identify the content that follows.

<h2>How to repair the checkout form</h2>

Do not use headings as decoration

If text is not a section label, style a paragraph or span instead of giving it heading semantics.

<p class="text-2xl font-bold">Limited stock</p>

From finding to verified fix

Repair the shared outline, then test whether it makes sense.

01
Read the rendered outline
List the page headings in DOM order. Ignore font size for the moment and look at the ranks and wording.
02
Find the first broken relationship
Start where a level is skipped or a child section is presented as a peer. Trace that element to its component, template or CMS field.
03
Repair the source hierarchy
Change the semantic heading element in the shared source. Keep the visual design with CSS rather than selecting a rank for its default appearance.
04
Re-scan the same URL
Confirm the machine-detectable heading-order finding clears after the updated source renders.
05
Review navigation manually
Use a screen reader heading list or another outline view. Check that the labels and nesting describe the page, not merely that the numbers ascend.

What ClearSite can detect

Rendered heading levels that axe-core can determine increase out of order, with the affected heading attached to the finding.

What a re-scan can prove

Whether the machine-detectable heading-order finding clears after the source hierarchy changes.

What still needs a person

Whether the headings are descriptive, the outline represents the real content, and navigation makes sense with assistive technology.

Browse the website accessibility issue library, compare the form-label repair guide and missing-alt-text guide, or read the full automated testing workflow and limits.

Check the outline people use to navigate your page.

Run it free, repair the semantic source, then re-scan and review the heading list.

Find heading-order issues