accessible-motion

用途

accessible-motion 是一个动效无障碍设计技能，适用于以下场景：实现减少动效（reduced motion）替代方案、设计前庭安全（vestibular-safe）动画、满足 WCAG 合规要求，以及为有动效敏感、前庭障碍或认知障碍的用户进行设计。其核心原则是：动画应当增强理解，而绝不能妨碍理解；当动效造成伤害时，应提供保持功能性的替代方案。

主要能力

该技能将迪士尼 12 条动画原则逐条转化为无障碍实现方式：

挤压与拉伸（Squash & Stretch）：改用透明度或颜色变化，例如按钮按下时变暗而非压缩，加载指示器脉冲透明度而非弹跳。
预备动作（Anticipation）：使用静态指示器，立即显示加载状态而非动画准备，悬停状态即时变色而非缩放。
舞台调度（Staging）：使用焦点管理与视觉层级，滚动到内容而非动画揭示，用静态高亮代替基于动效的注意力引导。
逐帧/姿势到姿势（Straight Ahead / Pose to Pose）：使用即时状态切换。
跟随与重叠（Follow Through / Overlapping）：消除，元素立即到达最终状态，无沉降、弹跳或过冲效果。
缓入缓出（Slow In / Slow Out）：即时（0ms）或非常轻柔、延长时长（500ms 以上）且位移极小。
弧线（Arc）：仅使用直线或无移动，优先透明度过渡而非位置过渡，不使用圆形或复杂运动路径。
次要动作（Secondary Action）：大幅减少或消除，每次交互只给单一清晰反馈，无级联或交错动画。
时间（Timing）：两种方式——即时（0ms）用于干脆反馈，或延长（500ms 以上）用于轻柔感知；避免 150–400ms 区间，因为该区间快到能被注意到、又慢到可能触发症状。
夸张（Exaggeration）：完全移除，仅使用字面、成比例的视觉反馈，无过冲、弹跳或戏剧化效果。
扎实绘图（Solid Drawing）：在静态状态下保持视觉清晰，设计必须在无任何动画时也能工作，具备强对比与清晰层级。
吸引力（Appeal）：通过清晰而非个性获得吸引力，交互干净可预测，让用户对界面稳定性有信心。

使用方式

技能提供尊重用户偏好的两种检测方式。

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 检测示例：

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

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

安全动效模式

通常安全：透明度淡入淡出（保持轻微）、颜色过渡、小幅缩放（小于 5%）、非常缓慢的移动（500ms 以上）、非重复动画。

潜在有害：视差滚动、背景移动、缩放动画、旋转/自旋元素、快速重复动画、大面积移动区域（超过视口 1/4）。

始终避免：自动播放的视频背景、无限动画、触发前庭反应的模式、闪烁（癫痫风险）、快速放大缩小。

WCAG 指南

WCAG 2.1 相关成功标准：

2.3.3 交互触发的动画（AAA）：由交互触发的动效可以禁用，除非是必要的。
2.2.2 暂停、停止、隐藏（A）：持续超过 5 秒的移动内容必须可暂停。
2.3.1 三次闪烁（A）：内容每秒闪烁不得超过 3 次。

实现检查清单

全局尊重 prefers-reduced-motion
所有动画都有减少/无动效替代方案
无超过 5 秒的自动播放动效
用户可以暂停/停止任何动画
内容每秒闪烁不超过 3 次
必要功能在无动画时仍可工作
焦点状态在无动效时清晰可见
加载状态在无动画时仍可工作
错误状态在无动画时仍可见
表单验证对静态友好

测试

在操作系统设置中启用减少动效
验证所有功能正常工作
检查所有状态都被清晰传达
确保不应保留的动效已被减少
与屏幕阅读器用户一起测试
如有可能，与前庭障碍用户一起验证

适用场景与限制

该技能适用于需要满足无障碍要求的 Web 界面动效设计，尤其是涉及前庭障碍、动效敏感与认知障碍用户的场景。资料未提供具体平台限制、收费信息或价格，相关内容暂未提供。