How to build an accessible Skeleton in React
Presentational by role — the placeholder shapes carry no meaning; the surrounding region should expose busy/loading state so assistive tech is not left guessing
When to use a Skeleton
- Indicating loading by mirroring the shape of the content that will appear
- Reducing layout shift while data for a known structure is fetching
- Loading larger content regions where shape preview reassures the user
When not to use it
- Indeterminate work with no known content shape — use Spinner
- A view that is empty rather than loading — use EmptyState
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: Leaving Skeleton mounted after data has loaded
Prefer: Swap Skeleton for the real content once data resolves
A persistent skeleton signals perpetual loading and traps assistive tech in a pending state
Example
<Skeleton lines={3} />