MEDIUMWCAG 1.3.1 A
Heading Level Chaos
Sections skip heading levels and break document outline logic, harming navigation and comprehension.
Try It Yourself
Demo warning
Inconsistent heading hierarchy weakens orientation even when content itself is accurate.
Compare the visual hierarchy with the simulated heading list to see how the reading order becomes confusing.
Manual Testing Protocol
Follow this sequence to reproduce the failure consistently and verify the fix with the same workflow.
1. Setup
- Start in the heading-chaos demo with SR simulation enabled.
- Review both visual and announced heading order.
2. Reproduction Steps
- Navigate by heading shortcuts in sequence.
- Compare announced level order to logical document sections.
- Attempt to build a mental outline of page structure.
3. Expected Failure Signals
- Heading levels jump unpredictably (e.g., h1 to h4 to h2).
- Users cannot infer section hierarchy from heading order.
- Large content becomes harder to scan and revisit.
4. Fix Verification
- Headings reflect a consistent top-down structure.
- Skipped levels are eliminated unless semantically justified.
- Heading navigation produces an outline matching visual layout.
Evidence Capture Checklist
- Record the exact user goal that fails (for example: submit form, complete checkout, navigate menu).
- Capture screen recording + keyboard path from first interaction to failure state.
- Map failure to WCAG 1.3.1 (Level A) and affected user groups.
- Document business impact: conversion loss, support burden, legal/compliance risk, or trust damage.
The Impact
What Happens
- Users cannot predict document structure
- Heading shortcuts produce misleading jumps
- Large pages take longer to scan
Who Gets Hurt
Screen reader users navigating by headings
Users relying on clear content hierarchy
The Broken Code
<h1>Checkout</h1>
<h4>Shipping Address</h4>
<h2>Payment</h2>
<h5>Security</h5>WCAG 1.3.1: Reference
"Information, structure, and relationships conveyed through presentation can be programmatically determined."
Level A - Heading structure is the table of contents for assistive and scanning users.
Related Medium Issues
Explore neighboring failures in the same severity band.