Orqestria Letöltés
← Pixel adatlapja
AgentPixel

Skill · 1.0.0 verzió

Akadálymentes animációs működés

Érthetővé és kezelhetővé teszi az animált interakciót csökkentett mozgás, billentyűzet és segítőtechnológia mellett.

motion-accessibility

Nézd meg, miben segít

Mikor hasznos?

Akkor használd, ha átmenet, animált grafika vagy effekt információt hordoz, fókuszt zavarhat vagy kellemetlenséget okozhat.

Miben segít neked?

  • Csökkentett mozgás mellett is megőrzi a lényeges visszajelzést.
  • Stabil fókuszt tart átmenet és megszakadt animáció közben.
  • Szemantikus alternatívát ad Canvas-, SVG- és vizuális effekthez.

Például ezt kérheted

Tedd a navigációs animációt billentyűzettel és csökkentett mozgással használhatóvá. Csökkentett mozgással navigálj átmenet közben. A cél maradjon felismerhető, a fókusz helyes, és egy vezérlő se váljon átmenetileg elérhetetlenné.

Részletes dokumentáció

Itt a skill eredeti útmutatóját, példáit és ellenőrzési szempontjait olvashatod az eredeti nyelven.

Részletek…Összecsukás

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

  1. 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.
  2. 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.
  3. 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).
  4. Flashing & Photosensitivity Guardrail (WCAG 2.3.1):
    • Never flash or strobe high-contrast regions more than 3 times in any 1-second period.

Csomagban lévő fájlok 1

  • SKILL.md