Role and semantics
Section titled “Role and semantics”Skeleton renders an element with role="status" and aria-busy="true". The shapes are hidden with aria-hidden; the visually hidden label tells the state. With decorative, the whole element is hidden.
Keyboard
Section titled “Keyboard”Skeleton takes no focus and has no keyboard interaction.
It takes no focus. Do not move focus when content arrives; let the user move through the content in their own order.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Default | “Loading content” |
| Card placeholder | The container’s label: “Loading card” |
decorative |
Nothing |
Contrast
Section titled “Contrast”The placeholder carries no information, so no contrast requirement applies. The text label reports the state.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Skeleton meets it | What the product team does |
|---|---|---|
| 2.2.2 Pause, stop, hide | The highlight stops after 4.5 seconds. | Do not loop the placeholder. |
| 2.3.3 Animation from interactions | The highlight does not cross under reduced motion. | Do not add animation with className. |
| 4.1.3 Status messages | role="status" and a localised label. |
Use one status role per item. |