React fix guide
Fix Heading structure problems on React
Headings create an outline; random levels harm navigation.
Check your live page
Canonical issue page: Heading structure problems →
What this issue means
Why structure matters
Screen reader users jump by headings. Skipping from h1 to h3 breaks expectations; multiple h1s can be acceptable if scoped correctly.
How to fix on React
In React, trace the component that renders the failing node. Prefer native elements with visible text, `aria-label` only when no text exists, and test the built bundle—not just source.
How to fix
Use levels in order for the outline; style via CSS instead of picking headings for size.
Wrap repeated sections in landmarks (header, nav, main, footer) to aid navigation.
Related: 1.3.1 Info and Relationships.
Other platforms
TestAccessibility · Programmatic fix page · localhost:3001