Skeleton accessibility

WCAG 2.1 AA requirements

Hidden from assistive tech

• Skeleton renders with aria-hidden, so screen readers skip it entirely. The pulsing animation is a visual cue only.
• The actual content, once loaded, replaces the skeleton and is announced normally.

Announcing loading state

• Skeleton itself does not announce "loading" to screen readers. If you need to communicate a loading state, add an aria-busy="true" on the container and an aria-live="polite" region that announces when content is ready.
• Example pattern:

<div aria-busy={isLoading} aria-live="polite">
  {isLoading ? (
    <Skeleton className="h-4 w-48" />
  ) : (
    <p>{content}</p>
  )}
</div>

Reduced motion

• The pulse animation respects prefers-reduced-motion through Tailwind's animate-pulse utility. When reduced motion is preferred, the animation is suppressed by the user agent.

Contrast

• Skeleton uses bg-muted, a subtle grey that is visible against bg-background without being distracting.

Audit checklist

• aria-hidden on the skeleton element
• Container has aria-busy when loading
• aria-live region announces content when ready
• Pulse animation respects reduced motion preference