资源 · 66
动画：验证减少动作、暂停和理解效果
评估动作，提供简化的行为模式，并测试在没有动画的情况下，进度、状态和导航是否仍然清晰易懂。
已更新 · 3 min
本指南有助于实现的目标
- 库存触发器
- 定义简化行为
- 分离 WCAG 标准
- 测试所有实现
快速检查
- 简化动作是否意味着完全禁止动画？
- 标准 2.3.3 是否达到 AA 级？
- 全局 CSS 规则是否足够？
分步指南
- 1
库存触发器
列出自动、交互触发和滚动链接的动画。 将状态信息与装饰信息分离。 同时检查 JavaScript 动画、视频和嵌入元素。
交付成果：效果和用途注册表。
- 2
定义简化行为
prefers-reduced-motion 表示希望减少非必要的动画。 提供静态或更安静的替代方案，同时保留信息和控件。 避免用其他分散注意力的效果替换大型平移效果。
交付成果：每个组件的简化行为。
- 3
分离 WCAG 标准
交互动画标准 2.3.3 为 AAA 级。 A 级标准 2.2.2 涵盖了某些持续时间超过五秒的自动动画（除非是必要的），除非与其他内容同时出现。 检查适用标准的条件。
交付成果：每个效果的标准和控件。
- 4
测试所有实现
在加载前和会话期间模拟偏好设置。 检查样式、脚本和程序化滚动。 如果状态依赖于动画完成，则确保在移除动画后也能得出可靠的结论。
交付成果：冷加载、实时更改和最终状态试验。
- 5
保留信息和控件。
测试两种模式下的阅读、键盘和错误反馈。 对于受影响的自动运动，测试暂停、停止或隐藏以及阅读期间的稳定性。 记录异常情况，而不是将每个动画都标记为必要。
交付成果：证据和局限性。
可重复使用的工作表
填写您已授权的观察结果。 这些字段是工作模板，而非观察结果。
| 字段 | 待记录信息 |
|---|---|
| 影响 | 触发器、持续时间和信息 |
| 备选方案 | 简化版本和最终状态 |
| 标准 | 级别、条件和控制 |
| 试验 | 首选项、键盘、结果和限制 |
虚构示例
示例情境
虚构示例：面板仅在其过渡完成后才变为活动状态。
决策及预期证据
接受简化模式会显示等待时间；组件完成其状态更改，而无需依赖动画持续时间。
区分机制
| 机制 | 目的 | 验证或限制 |
|---|---|---|
| 减少动态效果偏好 | 适应系统选择 | 同时检查脚本 |
| 暂停控制 | 控制受影响的自动动态效果 | 使其可通过键盘操作 |
| 静态状态 | 保留无动态效果的信息 | 不移除进度或错误反馈 |
管理指标
| 指标 | 衡量内容 | 首要行动 |
|---|---|---|
| 适应性效果 | 具有已验证替代方案的动态效果 | 包含嵌入和滚动 |
| 保留任务 | 在减少模式下完成的旅程 | 检查动画相关状态 |
| 工作控件 | 暂停或停止实际有效 | 检查恢复和键盘 |
常见错误
- 同时检查脚本
- 使其可通过键盘操作
- 不移除进度或错误反馈
常见问题解答
简化动作是否意味着完全禁止动画？
否。 它表达了一种偏好；选择适当的适应性并保留必要的信息。
标准 2.3.3 是否达到 AA 级？
否，它是 AAA 级。 其他标准可能适用于自动动态效果或闪烁。
全局 CSS 规则是否足够？
它可以减少许多效果，但可能无法控制脚本、视频或集成。 请测试实际组件。
官方参考文献
参考文献支持该方法。 请根据您的实际情况调整检查；它们并非认证。 原始参考文献标题和源文档可能使用其他语言。
参考资料查阅日期 .
