Heading Hierarchy
Headings are the primary navigation tool for screen reader users — a logically nested, unbroken heading structure lets users scan and jump through content efficiently.
Screen reader users navigate a page the same way sighted users scan it — by headings. A logical heading hierarchy is not a style concern. It is navigation infrastructure.
How heading navigation works
Screen readers provide a command to list all headings on a page and to jump between them. For many users this is how a page is explored: scan the heading list, identify what is relevant, jump directly to it. This works only if the heading structure accurately represents the page. A page with all its headings styled as <h1> elements, or one that skips from <h1> to <h3>, produces a heading list that is misleading or incoherent.
The rules
One <h1> per page — the primary title. Section headings are <h2>. Subsections within those sections are <h3>. Headings nest logically: an <h3> must always follow an <h2> or another <h3>. You must not skip levels in the downward direction — going from <h2> directly to <h4> creates a structural gap that screen readers report to users. You may skip levels upward — finishing a subsection and returning to the top level is correct.
Headings versus visual styling
The most common mistake is choosing a heading level based on the visual size you want rather than the structural position in the page. If you need an <h2> that looks smaller, use CSS. If the heading structure requires an <h2> but the design calls for large text, do not use <h1>. Heading level is a structural decision. Visual size is a style decision. Keep them separate.
In components
Heading levels in reusable components are a particular challenge. A card component that contains an <h2> will be structurally wrong when placed inside a section that already has <h2> headings. Make heading level configurable in components, or document the required nesting context clearly.
The takeaway
Audit the heading structure of every page as part of your design review. Use browser devtools or a screen reader to pull the heading list and verify it reads as a coherent outline of the page. A well-structured heading tree is the single most impactful structural improvement you can make for screen reader users.