Motion

# Motion Accessibility Guide

Complete guide to making Motion animations accessible for all users, including those with motion sensitivities, keyboard-only navigation, and screen readers.

---

## Table of Contents

1. [Respecting prefers-reduced-motion](#respecting-prefers-reduced-motion)
2. [Keyboard Navigation Support](#keyboard-navigation-support)
3. [ARIA Integration](#aria-integration)
4. [Testing Accessibility](#testing-accessibility)

---

## Respecting prefers-reduced-motion

### What is prefers-reduced-motion?

Users can enable "Reduce Motion" in their operating system settings to indicate they prefer minimal animation. This setting helps users with:
- Vestibular disorders (motion sickness from animations)
- Attention disorders (distraction from movement)
- Epilepsy (seizure triggers)
- Personal preference

### How to Enable (for testing)

**macOS**:
1. System Settings → Accessibility → Display
2. Enable "Reduce motion"

**Windows**:
1. Settings → Ease of Access → Display
2. Enable "Show animations" → OFF

**iOS**:
1. Settings → Accessibility → Motion
2. Enable "Reduce Motion"

**Android 9+**:
1. Settings → Accessibility
2. Enable "Remove animations"

### Implementation with MotionConfig

The recommended approach for respecting user preferences:

```tsx
import { MotionConfig } from "motion/react"

function App() {
  return (
    <MotionConfig reducedMotion="user">
      {/* All Motion components respect OS setting */}
      <YourApp />
    </MotionConfig>
  )
}
```

**How it works:**
- `reducedMotion="user"`: Respects OS setting (default behavior)
- `reducedMotion="always"`: Force instant transitions (no animations)
- `reducedMotion="never"`: Ignore OS setting (always animate)

**What happens when enabled:**
- All transitions become instant (`duration: 0`)
- Spring animations skip to final state
- Layout animations still work but happen immediately
- Enter/exit animations complete instantly

### Manual Detection (for fine-grained control)

When MotionConfig isn't sufficient:

```tsx
import { useReducedMotion } from "motion/react"

function Component() {
  const prefersReducedMotion = useReducedMotion()

  return (
    <motion.div
      animate={{ x: 100 }}
      transition={{
        duration: prefersReducedMotion ? 0 : 0.5,
        type: prefersReducedMotion ? "tween" : "spring"
      }}
    />
  )
}
```

**Alternative (vanilla JavaScript):**
```tsx
const prefersReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches

<motion.div
  animate={{ opacity: 1 }}
  transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}
/>
```

### AnimatePresence and reducedMotion

**Fixed**: Motion v12.4.7 (February-March 2025) fixed the issue where AnimatePresence ignored reducedMotion settings.

If you're experiencing issues with AnimatePresence not respecting reduced motion preferences, ensure you're using Motion v12.4.7 or later:

```bash
# npm
npm install motion@^12.4.7

# yarn
yarn add motion@^12.4.7

# bun
bun add motion@^12.4.7
```

### Creating a Reusable Hook

```tsx
// hooks/useMotionConfig.ts
import { useReducedMotion } from "motion/react"

export function useMotionConfig() {
  const prefersReducedMotion = useReducedMotion()

  return {
    transition: {
      duration: prefersReducedMotion ? 0 : 0.3,
      type: prefersReducedMotion ? "tween" : "spring",
    },
    initial: (withMotion: Record<string, any>) =>
      prefersReducedMotion ? {} : withMotion,
    exit: (withMotion: Record<string, any>) =>
      prefersReducedMotion ? {} : withMotion,
  }
}

// Usage
function Component() {
  const config = useMotionConfig()

  return (
    <motion.div
      initial={config.initial({ opacity: 0, y: 20 })}
      animate={{ opacity: 1, y: 0 }}
      exit={config.exit({ opacity: 0, y: 20 })}
      transition={config.transition}
    />
  )
}
```

### Best Practices

**Do:**
- ✅ Wrap app in MotionConfig with `reducedMotion="user"`
- ✅ Manually check for AnimatePresence components
- ✅ Test with reduced motion