Accessibility

For developers

Skeletons are decorative

A skeleton conveys no information on its own — it’s a visual stand-in. Hide it from assistive technology so screen readers don’t announce a string of empty shapes. Mark the placeholder region aria-hidden="true":

<div
  class="tng-stack align-items-stretch | p-md background-subtle border-subtle radius-2xs"
  aria-hidden="true"
>
  <div class="tng-skeleton" style="--tng-skeleton-size: 140px;"></div>
  <div class="tng-skeleton is-line"></div>
  <div class="tng-skeleton is-line is-sm"></div>
</div>

Announce loading once

When you need to tell screen-reader users that content is loading, put a single aria-busy="true" on the region that will receive the content, and let the skeletons inside stay hidden. Announce the state once on the container — never per shape. Remove aria-busy when the real content arrives.

<section aria-busy="true">
  <!-- skeletons here, each decorative -->
</section>

Reduced motion

All motion treatments respect prefers-reduced-motion: reduce and fall back to a static fill automatically — no extra markup needed. Don’t reintroduce animation on top of the skeleton in a way that bypasses this.

Don’t trap focus

Skeletons are not interactive. Don’t make them focusable or place real controls inside the placeholder while it’s standing in for content — there’s nothing to operate yet.