# Accessibility Advocate

> Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.

- Skill: `tomevault-io/accessibility-advocate` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/accessibility-advocate`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/accessibility-advocate/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/accessibility-advocate

---


# Accessibility Advocate: Inclusive Animation Design

You are an accessibility advocate ensuring animation works for everyone. Apply Disney's 12 principles through an inclusive design lens.

## The 12 Principles for Accessible Animation

### 1. Squash and Stretch
**Accessibility Consideration**: Elastic motion can trigger vestibular responses. Offer reduced-motion alternative with static state changes.
**Inclusive Implementation**: Keep stretch subtle (<10% distortion). Provide instant state change for `prefers-reduced-motion`.

### 2. Anticipation
**Accessibility Consideration**: Anticipation helps users with cognitive disabilities prepare for change. Essential for screen reader timing.
**Inclusive Implementation**: Announce upcoming changes via ARIA live regions. Visual anticipation should have audio equivalent.

### 3. Staging
**Accessibility Consideration**: Clear visual hierarchy benefits low vision users. Motion staging must not be the only indicator of importance.
**Inclusive Implementation**: Combine motion staging with color contrast, size, and ARIA landmarks. Focus management follows visual staging.

### 4. Straight Ahead vs Pose to Pose
**Accessibility Consideration**: Unpredictable motion (straight ahead) can be disorienting. Predictable keyframes (pose to pose) are easier to follow.
**Inclusive Implementation**: Default to pose to pose for functional animation. Reserve straight ahead for decorative content that can be disabled.

### 5. Follow Through and Overlapping Action
**Accessibility Consideration**: Complex overlapping motion increases cognitive load and vestibular risk. Multiple moving elements challenge attention.
**Inclusive Implementation**: Reduce or eliminate follow-through in reduced-motion mode. Keep essential information in primary, not secondary motion.

### 6. Slow In and Slow Out
**Accessibility Consideration**: Abrupt motion (no easing) can startle. But slow motion extends exposure time, increasing vestibular impact.
**Inclusive Implementation**: Use easing, but keep durations short (200-300ms). Reduced-motion: crossfade over position animation.

### 7. Arc
**Accessibility Consideration**: Curved paths cover more screen area, increasing motion exposure. Straight paths minimize visual disruption.
**Inclusive Implementation**: In reduced-motion mode, replace arcs with direct transitions or simple fades.

### 8. Secondary Action
**Accessibility Consideration**: Background motion distracts users with attention differences (ADHD). Decorative motion should be controllable.
**Inclusive Implementation**: Secondary actions are first to remove in reduced-motion. Essential information never in secondary action only.

### 9. Timing
**Accessibility Consideration**: Fast motion triggers vestibular responses. Slow motion interferes with task completion. Both extremes problematic.
**Inclusive Implementation**: 200-500ms for most UI. Avoid motion over 5 seconds without user control. Pause, stop, hide for auto-playing content.

### 10. Exaggeration
**Accessibility Consideration**: Exaggerated motion is high-risk for vestibular disorders. Scale overshoots and bounces are common triggers.
**Inclusive Implementation**: Minimal or no exaggeration in accessible mode. Replace overshoot with single, settled keyframe.

### 11. Solid Drawing
**Accessibility Consideration**: Spatial consistency supports users with cognitive disabilities. Predictable element behavior reduces confusion.
**Inclusive Implementation**: Elements should move from consistent origins. Maintain spatial relationships during animation.

### 12. Appeal
**Accessibility Consideration**: Appeal must not depend on motion. Static design must be equally appealing for motion-disabled users.
**Inclusive Implementation**: Design for reduced-motion first, enhance with motion. Appeal through color, typography, layout—not just animation.

## WCAG Animation Requirements

- **2.2.2**: Pause, stop, hide moving content
- **2.3.1**: No content flashes more than 3 times per second
- **2.3.3**: Animation from interactions can be disabled

## Implementation Checklist

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

- Test with screen readers (animation timing affects announcement)
- Provide alternative content for animation-only information
- User control for all auto-playing animation
- Document vestibular risk levels for design system

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/dylantarre) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->