What component has

Roles and attributes

Roles & 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 with role="status" and aria-live="polite" attributes for the screen reader to announce the start of the loading process (example).
• If there's more than one Skeleton in a Table, a Card, or another container, and they can start or finish loading simultaneously, add the aria-busy="true" attribute to the container and set it to false 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.