Skeleton

The Skeleton component has been designed with accessibility in mind, providing features that enhance the experience for users of assistive technologies during content loading.

The following props are available to improve the accessibility of your Skeleton component:

The title prop is crucial for screen reader accessibility. When provided, it ensures that screen readers announce the loading state to users. Without it, users might not be aware that content is loading.

The Skeleton component automatically implements the following accessibility features:

• aria-hidden="true": The SVG element that renders the skeleton is hidden from screen readers to prevent them from announcing the complex SVG structure.

• When a title prop is provided, the component adds a visually hidden element containing the title text. This ensures screen readers announce the loading state without disrupting the visual appearance.

• The component includes a subtle pulsing animation to indicate loading, but this animation is only applied when the user has not enabled reduced motion settings.

These features ensure that the loading state is communicated effectively to screen reader users while maintaining a clean visual experience for all users.

• Always provide a title prop with a clear, descriptive message that informs users that content is loading. For example: “Loading profile information” or “Flight details loading”.

• Use proper ARIA attributes on the container that will display the actual content (not on the Skeleton itself):

  • Apply aria-busy="true" to the content container while data is loading
  • Change to aria-busy="false" when loading completes
  • Consider adding role="status" to the container to inform screen readers of state changes

• When loading completes, completely remove the Skeleton component rather than just hiding it. This ensures screen readers don’t encounter hidden loading indicators.

• When multiple Skeleton components are used together, provide a title only for one of them to avoid redundant announcements to screen reader users. Alternatively, you can set aria-label on the container element with proper role to ensure the label is announced.

• Ensure that the title text is properly translated to match the user’s language.

Since Skeleton is a non-interactive component used to represent loading states, it doesn’t have specific keyboard interactions. However, developers should ensure that:

• When content finishes loading and interactive elements appear, they should be properly focusable according to a logical tab order.
• If loading content will add focusable elements to the page, consider managing focus to guide users to the newly loaded content.
• For very long loading times, consider providing a way for keyboard users to skip over large skeleton sections to reach other interactive content on the page.

<Skeleton title="Loading product details" height={200} width={300} />

<div role="status" aria-busy={isLoading}>
  {isLoading ? (
    // While loading, show skeleton
    <Skeleton title="Loading flights list" rows={3} />
  ) : (
    // When loaded, show content (aria-busy is already false via the container)
    <FlightsList />
  )}
</div>