Zugängliches Animationsverhalten

Hält animierte Interaktionen verständlich und bedienbar bei reduzierter Bewegung, Tastatur und Hilfstechnologien.

motion-accessibility

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze ihn, wenn Übergänge oder Effekte Informationen tragen, Fokus stören oder Beschwerden auslösen können.

Wobei hilft er dir?

Erhält wesentliche Rückmeldung bei reduzierter Bewegung.
Hält Fokus bei Übergängen und unterbrochenen Animationen stabil.
Bietet semantische Alternativen für Canvas, SVG und visuelle Effekte.

Das könntest du fragen

Mache einen animierten Navigationswechsel mit Tastatur und reduzierter Bewegung nutzbar. Aktiviere reduzierte Bewegung und navigiere während des Übergangs. Ziel und Fokus bleiben verständlich; kein Bedienelement wird vorübergehend unzugänglich.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

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 it inert (or aria-hidden="true" + tabIndex={-1} + pointer-events: none) so keyboard Tab navigation 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-label on the parent with aria-hidden="true" on visual split spans) or revert the split DOM back to plain text once the entrance completes.
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).
Flashing & Photosensitivity Guardrail (WCAG 2.3.1):
- Never flash or strobe high-contrast regions more than 3 times in any 1-second period.

Enthaltene Dateien 1

SKILL.md