accessible-motion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Accessible Motion Design

无障碍动效设计

Apply Disney's 12 animation principles while ensuring accessibility for users with vestibular disorders, motion sensitivity, and cognitive disabilities.

在为患有前庭障碍、动效敏感及认知障碍的用户保障无障碍体验的同时，应用迪士尼的12项动画原则。

Quick Reference

快速参考

Principle	Accessible Implementation
Squash & Stretch	Opacity/color change instead
Anticipation	State change indication without motion
Staging	Focus management, not motion-based
Straight Ahead / Pose to Pose	Instant state changes
Follow Through / Overlapping	Eliminated or minimal fade
Slow In / Slow Out	Instant or very gentle ease
Arc	Straight or no movement
Secondary Action	Reduced or eliminated
Timing	Instant (0ms) or extended duration
Exaggeration	Removed entirely
Solid Drawing	Static visual clarity
Appeal	Clarity over personality

原则	无障碍实现方案
挤压与拉伸	替换为透明度/颜色变化
预备动作	用状态变化提示替代动效
舞台呈现	聚焦管理，而非基于动效
逐帧动画/关键帧动画	即时状态切换
跟随动作/重叠动作	移除或仅保留淡入淡出效果
缓入缓出	即时切换或极平缓的过渡
弧线运动	直线运动或无位移
次要动作	简化或移除
时长控制	即时（0ms）或延长时长
夸张表现	完全移除
扎实造型	静态视觉清晰化
吸引力	以清晰性优先于个性化

Core Principle

核心原则

Animation should enhance understanding, never hinder it. When motion causes harm, provide alternatives that maintain functionality.

动效应为理解体验赋能，而非造成阻碍。当动效会对用户造成不适时，需提供可维持功能的替代方案。

Respecting User Preferences

尊重用户偏好

CSS Media Query

CSS媒体查询

css

/* Default: Full animation */
.element {
    transition: transform 300ms ease-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .element {
        transition: opacity 200ms ease-out;
        /* Or no transition at all */
        transition: none;
    }
}

css

/* Default: Full animation */
.element {
    transition: transform 300ms ease-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .element {
        transition: opacity 200ms ease-out;
        /* Or no transition at all */
        transition: none;
    }
}

JavaScript Detection

JavaScript检测

javascript

const prefersReducedMotion = window.matchMedia(
    '(prefers-reduced-motion: reduce)'
).matches;

if (prefersReducedMotion) {
    // Use instant transitions or subtle fades
} else {
    // Use full animations
}

javascript

const prefersReducedMotion = window.matchMedia(
    '(prefers-reduced-motion: reduce)'
).matches;

if (prefersReducedMotion) {
    // Use instant transitions or subtle fades
} else {
    // Use full animations
}

Principle Adaptations

原则适配方案

Squash & Stretch → Replace with opacity or color changes. A button can darken on press instead of compressing. Loading indicators can pulse opacity instead of bouncing.

Anticipation → Use static indicators. Show a loading state immediately rather than animated preparation. Hover states change color instantly rather than scaling.

Staging → Use focus management and visual hierarchy. Scroll to content rather than animated reveals. Static highlighting over motion-based attention.

Motion Types → Instant state changes replace transitions. Toggle switches snap position. Modals appear instantly. Menus show without animation.

Follow Through → Eliminated. Elements reach final state immediately. No settling, bouncing, or overshoot effects.

Easing → Either instant (0ms) or very gentle, extended duration (500ms+) with minimal distance. If using motion, slow and subtle.

Arc/Paths → Straight movement only if any movement. Prefer opacity transitions over positional. No circular or complex motion paths.

Secondary Action → Significantly reduced or eliminated. Single, clear feedback per interaction. No cascading or staggered animations.

Timing → Two approaches: instant (0ms) for snappy feedback, or extended (500ms+) for gentle perception. Avoid 150-400ms range—fast enough to notice, slow enough to trigger symptoms.

Exaggeration → Removed entirely. Literal, proportional visual feedback only. No overshoots, bounces, or dramatic effects.

Solid Drawing → Maintain visual clarity in static states. Design must work without any animation. Strong contrast and clear hierarchy.

Appeal → Appeal through clarity, not personality. Clean, predictable interactions. User confidence in interface stability.

挤压与拉伸 → 替换为透明度或颜色变化。按钮可在按下时变暗，而非压缩变形；加载指示器可采用透明度脉动效果，而非弹跳动画。

预备动作 → 使用静态提示。立即显示加载状态，而非用动画做准备；悬停状态即时变色，而非缩放。

舞台呈现 → 运用聚焦管理与视觉层级。直接滚动到目标内容，而非通过动画展示；用静态高亮替代动效吸引注意力。

动效类型 → 用即时状态切换替代过渡动画。切换开关直接跳转至目标位置；模态框即时出现；菜单直接显示，无动画。

跟随动作 → 完全移除。元素直接到达最终状态，无沉降、弹跳或过冲效果。

缓动效果 → 要么即时（0ms），要么采用极平缓、延长时长（500ms以上）且位移极小的过渡。若必须使用动效，需保持缓慢且柔和。

弧线/路径运动 → 若需位移则仅用直线运动；优先选择透明度过渡而非位置变化；禁用圆形或复杂运动路径。

次要动作 → 大幅简化或移除。每次交互仅提供单一、清晰的反馈；无级联或交错动画。

时长控制 → 两种方案：即时（0ms）以获得干脆的反馈，或延长时长（500ms以上）以实现柔和感知。避免150-400ms的区间——这个速度足够被感知，却又慢到可能触发不适症状。

夸张表现 → 完全移除。仅保留真实、比例恰当的视觉反馈；无过冲、弹跳或夸张效果。

扎实造型 → 在静态状态下保持视觉清晰。设计需在无任何动画的情况下仍能正常使用；确保高对比度与清晰的层级结构。

吸引力 → 以清晰性而非个性化来提升吸引力。简洁、可预测的交互；让用户对界面稳定性充满信心。

Safe Motion Patterns

安全动效模式

Generally Safe

通常安全的动效

Opacity fades (keep subtle)
Color transitions
Small scale changes (<5%)
Very slow movement (500ms+)
Non-repeating animations

透明度淡入淡出（保持柔和）
颜色过渡
小幅度缩放变化（<5%）
极缓慢的位移（500ms以上）
非循环动画

Potentially Harmful

潜在有害的动效

Parallax scrolling
Background movement
Zoom animations
Spinning/rotating elements
Fast repeated animations
Large moving areas (>1/4 viewport)

视差滚动
背景移动
缩放动画
旋转/转动元素
快速重复动画
大面积移动区域（>1/4视口）

Always Avoid

需始终避免的动效

Auto-playing video backgrounds
Infinite animations
Vestibular-triggering patterns
Flashing (seizure risk)
Rapid zoom in/out

自动播放的视频背景
无限循环动画
触发前庭不适的动效模式
闪烁效果（引发癫痫风险）
快速缩放

WCAG Guidelines

WCAG指南

WCAG 2.1 Success Criteria

WCAG 2.1 成功标准

2.3.3 Animation from Interactions (AAA) Motion triggered by interaction can be disabled unless essential.

2.2.2 Pause, Stop, Hide (A) Moving content lasting >5 seconds must be pausable.

2.3.1 Three Flashes (A) No content flashes more than 3 times per second.

2.3.3 交互触发的动画（AAA级） 交互触发的动效应可禁用，除非是功能必需的。

2.2.2 暂停、停止、隐藏（A级） 持续超过5秒的移动内容必须支持暂停。

2.3.1 三次闪烁（A级） 内容每秒闪烁不得超过3次。

Implementation Checklist

实施检查清单

```
prefers-reduced-motion
```
respected globally
All animations have reduced/no-motion alternative
No auto-playing motion over 5 seconds
User can pause/stop any animation
No content flashes more than 3x/second
Essential functionality works without animation
Focus states clear without motion
Loading states work without animation
Error states visible without motion
Form validation static-friendly

全局遵循
```
prefers-reduced-motion
```
设置
所有动画均提供减少动效/无动效的替代方案
无持续超过5秒的自动播放动效
用户可暂停/停止所有动画
内容每秒闪烁不超过3次
核心功能在无动画时仍可正常使用
聚焦状态无需动效即可清晰识别
加载状态在无动画时仍可正常显示
错误状态无需动效即可清晰识别
表单验证适配静态场景

Testing

测试步骤

Enable reduced motion in OS settings
Verify all functionality works
Check all states are clearly communicated
Ensure no motion remains that should be reduced
Test with screen reader users
Validate with vestibular disorder users if possible

在系统设置中开启“减少动效”选项
验证所有功能均可正常使用
检查所有状态均能清晰传达
确保应减少的动效已全部移除
与屏幕阅读器用户共同测试
若可能，邀请前庭障碍用户参与测试