- 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
<div class="heading">Shipping Address</div>Why it matters
Screen-reader, braille, and reading-tool users who depend on coded structure rather than visual layout.
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.
<h2>Shipping Address</h2>A real heading element exposes the section structure to assistive tech; a styled div doesn't.
Outcome
On a weather app's forecast screen, this barrier is gone for screen-reader, braille — they no longer have to work around this.
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