- 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
Picture a weather app's forecast screen: heading levels skipped or chosen for styling (h1→h4), or multiple unrelated h1s obscuring structure.
Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout. Here, on a weather app's forecast screen, the result is they lose track of what belongs to what.
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
Use heading levels that reflect the outline (one h1, no skipped levels) — style size with CSS, not level choice.
Outcome
After the fix, the same visitor to a weather app's forecast screen can now understand how the page is organized.
Who is affected
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Text Styled to Look Like a Heading Instead of Coded as One
- Text Columns Faked With Spaces Instead of Real Table Markup
- Table Layout Faked With Spaces Instead of Real Table Code
- Clickable Div Acting as a Link Button With No Real Role
- Structural HTML Tags Used Purely for Visual Styling
- Layout-Only Table Wrongly Coded With Real Header Cells