Accessibility

A11y is built in, not bolted on. Every <AutoSkeleton>does the right thing for screen readers, keyboard users, and people with reduced-motion preferences.

What we set automatically

• aria-busy="true" on the wrapper while loading
• aria-live="polite" announces "loading content"
• Skeleton layer is aria-hidden="true" — readers skip it
• Real (invisible) content is hidden from a11y tree while loading
• Keyboard focus is trapped away from the invisible real content
• RN: accessibilityState={{ busy: true }}

Reduced motion

When prefers-reduced-motion: reduce is set, shimmer and wave are downgraded to a slower pulse. Toggle "Reduce Motion" in your OS settings to see this work live.

prefers-reduced-motion: no-preference (shimmer)

Loading content

Ada LovelaceMathematician, writer, and arguably the first computer programmer. Worked with Charles Babbage on the Analytical Engine.

FollowMessage

Disable behavior

<SkeletonProvider respectReducedMotion={false}>
  {/* shimmer always on, even with reduce-motion enabled */}
</SkeletonProvider>

Custom announcement

<AutoSkeleton loading aria-label="Loading user profile">
  <UserCard />
</AutoSkeleton>