Next.js fix guide
Fix Heading structure problems on Next.js
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 Next.js
In Next.js, verify both server and client components: hydration can change roles/names. Use `next/image` with meaningful `alt`, and ensure dynamic imports do not drop focus management.
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