无障碍运动：在不失去意义的情况下为首选减少运动而设计
如何设计尊重减少运动设置和前庭障碍的运动：WCAG 需要什么、删除什么、保留什么以及如何测试。
核心要点
当用户打开减少运动时，保留每个动画的含义，但删除运动：用短淡入淡或即时变化替换幻灯片、缩放和视差，停止自动播放循环，并且永远不要仅依靠运动来传达某些内容。在网络上，使用prefers-reduced-motion 媒体查询检测设置。
为什么这很重要
对于某些人来说，屏幕上的动作并不是品味问题。 W3C 指出，动画可能引发前庭疾病，反应包括恶心、偏头痛，严重时需要卧床休息才能恢复。操作系统允许人们请求减少运动，并且在网络上该请求被公开为首选减少运动媒体查询。当用户打开该设置时，其值会减小。
WCAG 要求什么
WCAG 的两个成功标准涵盖了运动。 2.2.2 暂停、停止、隐藏适用于自动开始的运动，例如轮播和循环动画，并且需要一种暂停、停止或隐藏它的方法。 2.3.3 交互动画（AAA 级）适用于由用户交互触发的运动，并建议避免不必要的动画、提供关闭动画的控件或使用操作系统的减少运动设置。即使不需要 AAA，遵循它也是很好的做法。
去掉动作，保留意义
减少运动并不意味着没有反馈。按下按钮的用户仍然需要知道它有效。目标是保持状态变化并放弃旅行。
- 删除或减少：大幻灯片、缩放、视差、滚动链接运动、旋转、自动循环播放和背景视频。
- 保留：颜色和不透明度变化、焦点指示器、短状态转换、进度信息。
- 替换：使用短交叉淡入淡出或即时更改进行页面和面板过渡。
- 从不：使用动作作为显示错误、更改或新项目的唯一方式。
实施它
在网络上，将非必要的运动包装在@media中（prefers-reduced-motion：no-preference），或在@media中覆盖它（prefers-reduced-motion：reduce）。在 JavaScript 中，读取 window.matchMedia('(prefers-reduced-motion: reduce)') 并监听变化。本机平台公开相同的设置：SwiftUI、UIKit 和 Android 都允许您检查它。如果您的设计系统具有运动标记，请为每个标记定义一个简化变体，以便每个组件的行为方式相同。
测试
在操作系统中打开减少动作并逐步完成每个关键流程。检查没有丢失任何重要内容，没有循环自动启动，并且滚动不会将内容移动到超出滚动本身的范围。浏览器开发人员工具也可以模拟该设置。
生产实施片段
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });要记住的关键 Principle
- 运动会使一些人身体不适；尊重环境
- 去除行程、缩放、视差和自动播放；保留状态变化和反馈
- WCAG 2.2.2涵盖自动运动； 2.3.3 涵盖交互引起的运动
- 在每个本机平台上检测偏好减少运动的设置
- 为每个动作标记设计一个简化的变体
常见问题解答
来源
- Understanding SC 2.3.3: Animation from Interactions — W3C 外语
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C 外语
- prefers-reduced-motion — MDN 网络文档
- Motion — Apple 人机界面指南