How to build an accessible Heading in React
Renders a real <h1>–<h6> from the level prop so the heading appears in the accessibility tree at the correct level; visual size is decoupled so styling never forces an incorrect level
When to use a Heading
- Titling a page or section as part of the document outline
- Keeping the semantic heading level correct while choosing the visual size independently
When not to use it
- Emphasizing inline or body text — use Text with a weight
- Long-form rendered content — let Prose style its own headings
Accessibility
Role heading, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Heading level={4} size="2xl"> chosen only to look big, skipping h2/h3
Prefer: Keep levels sequential; use size to control scale within the correct level
Skipping heading levels breaks the document outline screen-reader users rely on to navigate
Example
<Heading>Section title</Heading>