Developer What component has
Roles and attributes
| Attribute | Usage |
|---|---|
aria-busy="true" | Indicates that the element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. |
aria-label="Loading…" | Sets an accessible name for the element. |
Considerations for developers and designers
- When displaying
Skeletonin place of a heading, avoid semantic heading markup, as this can make navigation confusing for screen reader users. - Place
Skeletoninside a container withrole="status"andaria-live="polite"attributes for the screen reader to announce the start of the loading process (example).
Resources
- Detailed information about
aria-busystate you can find in the W3's guide. - MDN's guide for aria-busy describes core information for this state.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.