Accessible animation behavior
Keeps animated interactions understandable and operable for people who reduce motion, navigate by keyboard or use assistive technology.
motion-accessibility
Team members using this skill
When is it useful?
Use it when transitions, animated graphics or effects carry information and may disturb focus or cause discomfort.
What does it help you do?
- Provides reduced-motion alternatives that retain essential feedback.
- Keeps focus stable through transitions and interrupted animations.
- Supplies semantic alternatives for Canvas, SVG and visual effects.
Try asking this
Make an animated navigation transition usable with keyboard and reduced motion. Activate reduced motion and navigate during the transition. The destination remains obvious, focus arrives correctly and no control becomes temporarily inaccessible.
Detailed documentation
Read the skill’s original instructions, examples and checks in their authored language.
Show less
Motion Accessibility
Accessible motion does not mean stripping all transitions to jarring instant cuts; it means eliminating vestibular triggers (large spatial translation, parallax, zooming, spinning, and autonomous motion) while preserving clear state comprehension, keyboard focus, and screen-reader semantics.
Designing the prefers-reduced-motion: reduce Experience
Always design the reduced-motion behavior as a first-class state—never as an afterthought that leaves elements invisible (opacity: 0) or stuck off-screen:
| Full-Motion Pattern | Vestibular / Cognitive Risk | Required Reduced-Motion Alternative |
|---|---|---|
| Large slide-in, fly-through, or 3D camera travel | High vestibular nausea trigger | Replace spatial travel (translate, scale, 3D camera move) with a gentle 120ms–180ms opacity crossfade or instant state swap |
| Parallax & scroll-jacked / pinned scrubbing | Disorienting mismatch between scroll input and visual movement | Disable parallax depth offsets; render narrative scenes in clean static or step-triggered reading order |
| Looping ambient / background motion | Distraction & battery drain | Pause by default when prefers-reduced-motion: reduce matches, and provide an explicit Play/Pause toggle |
| Animated counters, typewriter text, or staggered reveals | Delays reading & confuses live-region announcements | Render final text and numbers immediately; keep the semantic string intact in the DOM |
Listen dynamically to window.matchMedia('(prefers-reduced-motion: reduce)') (change event, gsap.matchMedia(), or useReducedMotion()) so toggling OS accessibility settings updates the running page without requiring a reload.
Keyboard Focus, Screen Readers & Interactive Controls
- Never trap or lose focus during transitions:
- When opening a modal, drawer, or popover, move focus deterministically to the target container or first interactive control without waiting for a long decorative timeline to finish.
- When animating an element out (
exit), immediately mark itinert(oraria-hidden="true"+tabIndex={-1}+pointer-events: none) so keyboardTabnavigation cannot land on a disappearing node.
- Protect screen readers from DOM fragmentation:
- When splitting text into
<span class="char">nodes for staggered typography, either use a tool that manages accessibility attributes (aria-labelon the parent witharia-hidden="true"on visual split spans) or revert the split DOM back to plain text once the entrance completes.
- When splitting text into
- Canvas, SVG & WebGL Semantic Equivalents:
- Never treat a shape drawn inside
<canvas>or WebGL as an accessible button or chart on its own. Pair interactive Canvas/WebGL scenes with real, keyboard-focusable HTML overlay controls or structured fallback DOM (role="region",aria-label, and tabular/textual summary of the visual state).
- Never treat a shape drawn inside
- Flashing & Photosensitivity Guardrail (WCAG 2.3.1):
- Never flash or strobe high-contrast regions more than 3 times in any 1-second period.
Included files 1
SKILL.md