How to fix: missing H1 / wrong heading order

What it looks like in the wild

No H1 on the page, or multiple H1s, or skipped levels (H2 → H4).

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Screen readers navigate by heading. Hierarchy must reflect document structure.

The wrong pattern (avoid)

<div class="title-large">Pricing</div>
<h3>Free plan</h3>

The right pattern (copy this)

<h1>Pricing</h1>
<h2>Free plan</h2>

Notes from real audits

• One H1 per page is the safe default.

• Use the document outline tool in DevTools to inspect.

How to verify the fix

Shipping the change is not the same as passing 2.4.6 and 1.3.1. Re-run these checks against the page you edited before you close the ticket.

• Use a screen reader's heading list (NVDA: H key, VoiceOver: VO+U).

• Inspect tables for <th> and either scope or headers attributes.

• Check every <input> has a programmatic name.

• Read headings and labels alone; they should still mean something.

What 2.4.6 and 1.3.1 require

1.3.1 Info and Relationships (Level A, Perceivable): The visual structure of a page (headings, lists, tables, form labels) must also be available programmatically — assistive tech relies on the markup, not the styling. When you style a <div> to look like a heading without using <h2>, screen readers cannot navigate by heading. When form fields are not associated with labels, voice users cannot fill them in. Programmatic structure is the contract between visual design and assistive tech.

2.4.6 Headings and Labels (Level AA, Operable): Headings and labels must describe the topic or purpose of the content they introduce. Generic headings like "Section 1" or labels like "Field" force users to read the content beneath to find context. Descriptive text accelerates navigation for everyone.

• <div class="title"> styled to look like a heading

  1.3.1

• Visual list (bulleted with images) without <ul>/<li>

  1.3.1

• Data tables without <th> and scope attributes

  1.3.1

• Generic headings ("Welcome", "Section")

  2.4.6

• Form labels reading "Field 1"

  2.4.6

Priority: Moderate

This will not stop a user completing a task on its own, but it accumulates. A page carrying several moderate findings degrades into one that is technically usable and practically exhausting — and an auditor counts them individually.

Because the cause is almost always a shared component rather than a single page, fix it where the component is defined and re-scan the whole site. Record 2.4.6, 1.3.1 on the ticket verbatim: that string is what an auditor, a procurement questionnaire or a regulator will search for.