• Success Criterion 2.4.6
  • Conformance level AA

Heading That Actually Describes the Section Before It

2.4.6 — Headings and Labels

Scenario

Setting

A calendar app's event-creation form

What’s wrong

Headings describing the previous section due to placement errors.

Example 

<h2>Event Details</h2>
<input placeholder="Title">
<input type="datetime-local">
<h2>Reminders</h2>
<!-- reminders fields actually sit above, under Event Details; this heading now sits right before the guest fields -->
<input type="email" placeholder="Invite guest by email">

Why it matters

A user jumping to the Reminders heading lands right before the guest invite field instead of any reminder setting, since the heading was misplaced during an edit.

How to test

Compare each heading to the content that actually follows it: if a heading describes the previous section due to a placement error, it fails.

How to fix

Whenever a form's fields get reordered, double check every heading still sits directly above its real content.

<h2>Event Details</h2>
<input placeholder="Title">
<input type="datetime-local">
<h2>Set Reminders</h2>
<select><option>15 minutes before</option></select>
<h2>Invite Guests</h2>
<input type="email" placeholder="Invite guest by email">

Outcome

A user jumps to Invite Guests and lands exactly on the guest email field, not a leftover reminders label.

Who is affected

Screen reader users relying on headings to jump to a section land in the wrong content entirely.

Learn more

Related scenarios