• Success Criterion 1.3.1
  • Conformance level A

Heading Levels Skipped or Chosen Only for Font Size

1.3.1 — Info and Relationships

Scenario

Setting

A weather app's forecast screen

What’s wrong

Heading levels skipped or chosen for styling (h1→h4), or multiple unrelated h1s obscuring structure.

Example 

<h1>Weather</h1>
<h4>Today</h4>
<h1>Tomorrow</h1>
<h4>Hourly</h4>

Why it matters

A screen reader user scanning by heading level jumps from h1 to h4 and back to h1. The forecast's real hierarchy never comes through.

How to test

Use a screen reader's headings list (NVDA Insert+F7, VoiceOver Rotor): check heading levels go in order (h1, then h2s, no skipped levels) and reflect the visual outline, not font sizes.

How to fix

Pick heading levels for their place in the outline, never for the font size they happen to produce.

<h1>Weather</h1>
<h2>Today</h2>
<h2>Tomorrow</h2>
<h3>Hourly</h3>

Outcome

Today and Tomorrow now sit at the same outline level, so a user compares the two days without confusion.

Who is affected

Screen reader users navigating the forecast by heading level lose track of which sections nest under which.

Learn more

Related scenarios