Skip to content

Skeleton

What component has

Roles and attributes

Roles & attributes
AttributeUsage
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

Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.