Skip to content

Skeleton

What component has

Roles and attributes

The list below describes roles and attributes that component already has.

Roles & attributes
AttributeElementUsage
aria-busy="true"Implicit on svgThe aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. When multiple parts of a live region need to be loaded before changes are announced to the user, set aria-busy="true" until loading is complete. Then set to aria-busy="false". This prevents assistive technologies from announcing changes before updates are done.
aria-hidden="true"Implicit on svgThe aria-hidden hides SVG image from assistive technologies.
aria-atomic="true"In ARIA live regions, the global aria-atomic attribute indicates whether assistive technologies such as a screen reader will present all, or only parts of.
alt=''Implicit on svgEmpty alt attribute helps to avoid reading image as a text, since skeleton's SVG do not convey any meaningful information to assistive technologies.

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.

Resources

Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.