Skeleton Accessibility
Best Practices
Skeleton placeholders must use role="img" with aria-label="loading" to convey their loading state to assistive technologies.
The skeleton container element receives the ARIA attributes; child elements (e.g., skeleton__avatar , skeleton__text ) do not require additional accessibility markup.
When content finishes loading, the skeleton must be replaced with the actual content. Do not leave skeleton placeholders in the DOM alongside loaded content.
Interaction Design
Keyboard
Skeleton placeholders are not interactive and should not be keyboard focusable.
Screen Reader
A screen reader will announce the skeleton as an image with its aria-label value (e.g., "loading, image").
For composite skeletons with multiple placeholder elements, only the parent container requires role="img" and aria-label —this prevents repetitive announcements.
Pointer
Skeleton placeholders are not clickable. They serve only as visual indicators of loading content.
ARIA Reference
| Attribute | Description |
|---|---|
| role="img" | Applied to the skeleton container to identify it as an image element to assistive technologies. |
| aria-label="loading" | Applied to the skeleton container to provide an accessible name indicating the loading state. |