Guides
Accessibility
ARIA attributes, reduced motion, and screen reader support.
Built-in features
ARIA attributes
Every <Ghostly> wrapper automatically sets:
| Attribute | Loading | Loaded |
|---|---|---|
aria-busy | "true" | removed |
aria-live | "polite" | "polite" |
Reduced motion
When prefers-reduced-motion: reduce is enabled, all animations are disabled. Skeletons show as static blocks.
Pointer events
During loading, pointer-events: none and user-select: none prevent interaction with skeleton content.
Best practices
Use semantic HTML tags (h1-h6, p, img, button). Ghostly relies on them to identify content.
- Label skeleton regions with
aria-labelfor complex pages - Avoid long loading — show a "Still loading..." message after 5s
- Keep alt text on images for when content loads
- Test with screen readers — VoiceOver (Mac) or NVDA (Windows)
Screen reader experience
- Page loads →
aria-busy="true"→ "region busy" - Content arrives →
aria-busyremoved → content announced - User navigates → real content with proper headings/links