mcpField
A
accessible-motion

accessible-motion

github.com/dylantarre设计与 UI132646 次安装43 周前更新
代码仓库

关于 accessible-motion

一项将 Disney 的 12 条动画原则用于无障碍设计的技能，面向对运动敏感或有前庭、认知障碍的用户。它提供减少动画伤害的替代方案与检查清单，确保界面在无动画时仍清晰可用。

主要功能

  1. 0112 条动画原则的无障碍替代方案
  2. 02减少动态效果的 CSS 与 JavaScript 指引
  3. 03安全及潜在有害的动态效果模式
  4. 04WCAG 动态效果准则
  5. 05实施与测试清单

适用场景

  1. 01为运动敏感用户设计界面
  2. 02为减少动态效果偏好提供替代方案
  3. 03按无障碍检查项审查动画

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill accessible-motion

安装后在 Claude Code 中输入/accessible-motion确认已加载。

详细介绍

无障碍动作设计

运用迪士尼的 12 条动画原则，同时确保前庭障碍、动作敏感和认知障碍用户也能无障碍使用。

快速参考

原则无障碍实现方式
挤压与拉伸改用不透明度／颜色变化
预备动作不依赖动作来指示状态变化
演出布局管理焦点，而非依赖动作
直线动画／姿势对姿势即时状态变化
跟随动作／重叠动作移除或仅使用最短淡入淡出
慢入／慢出即时变化或非常柔和的缓动
弧线直线移动或不移动
次要动作减少或移除
节奏即时（0ms）或延长时长
夸张完全移除
扎实绘图保持静态视觉清晰度
吸引力清晰度优先于个性

核心原则

动画应帮助用户理解，绝不能造成阻碍。如果动作会造成伤害，应提供不影响功能的替代方式。

尊重用户偏好

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
}

原则调整

挤压与拉伸 → 改用不透明度或颜色变化。按钮按下时可变暗，而非压缩。加载指示器可改变不透明度来实现脉动，而非上下跳动。

预备动作 → 使用静态指示。立即显示加载状态，而非播放动画来做准备。悬停状态立即改变颜色，而非缩放。

演出布局 → 使用焦点管理和视觉层次。滚动到内容，而非通过动画展示内容。使用静态高亮，而非通过动作吸引注意。

动作类型 → 用即时状态变化取代过渡效果。切换开关立即切换位置。模态框立即出现。菜单立即显示。

跟随动作 → 移除。元素立即到达最终状态。不要使用稳定、弹跳或过冲效果。

缓动 → 使用即时变化（0ms），或非常柔和且时长较长（500ms+）的效果，并尽量缩短移动距离。如果使用动作，应缓慢且轻微。

弧线／路径 → 如果需要移动，只进行直线移动。优先使用不透明度过渡，而非位置变化。不要使用圆周或复杂的移动路径。

次要动作 → 大幅减少或移除。每次交互只提供单一、清晰的反馈。不要使用连续或交错动画。

节奏 → 有两种方式：使用即时变化（0ms）提供迅速反馈，或使用较长时长（500ms+）让变化更柔和。避免使用 150-400ms 的时长——这种速度足以让人察觉，又可能引发症状。

夸张 → 完全移除。只提供字面且合乎比例的视觉反馈。不要使用过冲、弹跳或戏剧性效果。

扎实绘图 → 确保静态状态下的视觉清晰度。设计必须在没有任何动画时也能正常使用。保持强烈对比度和清晰层次。

吸引力 → 通过清晰度而非个性来吸引用户。交互应简洁且可预测，让用户确信界面稳定。

安全的动作模式

通常安全
  • 不透明度渐变（保持轻微）
  • 颜色过渡
  • 小幅度缩放（<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 次
  • 无动画时核心功能仍可正常使用
  • 无动态效果时焦点状态仍清晰可见
  • 无动画时加载状态仍可正常显示
  • 无动态效果时错误状态仍清晰可见
  • 表单验证适用于静态界面

测试

  1. 在操作系统设置中启用减少动态效果
  2. 验证所有功能均可正常使用
  3. 检查所有状态是否传达清晰
  4. 确保不再保留需要减少的动态效果
  5. 与屏幕阅读器用户一起测试
  6. 如有可能，请眩晕障碍用户参与验证

评论

支持 Markdown