Skeleton
What component has
Roles and attributes
Attribute | Usage |
---|---|
aria-label="Loading…" | Sets an accessible name for the element. |
Considerations for developers and designers
- When displaying
Skeleton
in place of a heading, avoid semantic heading markup, as this can make navigation confusing for screen reader users. - Place
Skeleton
inside a container withrole="status"
andaria-live="polite"
attributes for the screen reader to announce the start of the loading process (example). - If there's more than one
Skeleton
in aTable
, aCard
, or another container, and they can start or finish loading simultaneously, add thearia-busy="true"
attribute to the container and set it tofalse
when all items have finished loading. This ensures the user isn't repeatedly notified about the loading of each element.
Resources
- Detailed information about
aria-busy
state 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.