Agent skill · design visual · dylantarre
accessibility-issues
Use when animation excludes users with vestibular disorders, cognitive disabilities, or assistive technology needs
Why this skill is useful
Provides specific code patterns and principles for creating accessible animations that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2025-12-30. 69 stars on the source repository.
What this skill does
Accessibility Issues Make animations inclusive using Disney's principles thoughtfully. Problem Indicators Motion sickness complaints Vestibular disorder triggers Screen reader confusion Cognitive overload Seizure risk (flashing) Keyboard focus lost during animation Diagnosis by Principle Squash and Stretch Issue: Excessive distortion causes disorientation Fix: Reduce or eliminate squash/stretch for users with prefers-reduced-motion. Use opacity changes instead. Secondary Action Issue: Too many moving elements Fix: Limit to one animated element at a time. Secondary actions should be subtle or removed. Exaggeration Issue: Dramatic motion triggers vestibular responses Fix: Reduce scale, rotation, and position changes. Keep movements small and predictable. Timing Issue: Animations too fast or too slow Fix: Provide consistent, predictable timing. Avoid sudden speed changes. Arcs Issue: Curved motion paths cause tracking difficulty Fix: Use linear motion for essential UI. Save arcs for optional decorative elements. Quick Fixes 1. Respect prefers-reduced-motion - Always check and honor 2. No autoplay animation - Let users trigger motion 3. Keep focus visible - Never animate focus indicator away 4. Announce changes - Use ARIA live regions for dynamic content 5. Provide pause controls - For any looping animation Troubleshooting Checklist [ ] Does animation respect prefers-reduced-motion? [ ] Is there a way to pause/stop animations? [ ] Are state changes announced to screen readers? [ ] Does keyboard focus remain visible and logical? [ ] Is flash rate under 3 per second? [ ] Can users complete tasks without animation? [ ] Are animations triggered by user action (not autoplay)? [ ] Test with screen reader enabled Code Pattern
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills dylantarre/accessibility-issues