How to build an accessible Card in React
role="region" is appropriate only when the card is a meaningful landmark; otherwise treat it as presentational — the visual surface adds no semantics on its own
When to use a Card
- Grouping related content into a visually distinct surface with border/shadow
- Creating scannable units in a grid or list (dashboard tiles, item summaries)
- Giving a content cluster elevation to separate it from the page background
When not to use it
- Pure semantic/structural grouping with no surface — use a <section>
- Wrapping every element in a card — nesting surfaces flattens visual hierarchy
Accessibility
Role region, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Nesting Cards several levels deep for layout
Prefer: A single Card with internal spacing, or a plain <section>
Stacked surfaces and shadows compete for attention and muddy the hierarchy
Example
<Card>
<CardHeader><CardTitle>Title</CardTitle></CardHeader>
<CardContent>Content here</CardContent>
</Card>