How to build an accessible Blockquote in React
Renders a native <blockquote> with the attribution in <footer><cite>, so the quotation and its source are semantically distinct to assistive tech
When to use a Blockquote
- Setting off a quoted passage from another source with visual emphasis
- Attributing a quote to a person or work via the cite footer
When not to use it
- Indenting or emphasizing your own non-quoted text — use Text styling
- Inline quotations within a sentence — use a <q> element
Accessibility
Role blockquote, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Using <Blockquote> purely to indent a callout
Prefer: A Card or styled Text block for non-quote emphasis
blockquote semantics tell assistive tech the content is a quotation; misusing it misleads readers
Example
<Blockquote>Less, but better.</Blockquote>