How to build an accessible AspectRatio in React
Purely presentational wrapper with no role; the inner media element carries its own semantics and alt text
When to use a AspectRatio
- Reserving a stable box for media that loads asynchronously, avoiding layout shift
- Embedding responsive iframes (video, maps) at a known proportion
- Keeping thumbnails or covers uniform across a grid
When not to use it
- Content whose height should grow with text — let it size naturally
- A single fixed-pixel image where width and height are already known
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Wrapping text content that must expand to fit its lines
Prefer: Reserve AspectRatio for media; let prose flow at its intrinsic height
A fixed ratio clips or distorts content that needs variable height
Example
<AspectRatio ratio={16 / 9}>
<img src="/cover.jpg" alt="Cover" />
</AspectRatio>