HTML动画无障碍实现：prefers-reduced-motion设置指南

在无障碍实践中，CSS 媒体查询 prefers-reduced-motion 是一个常被提及但又容易误解的特性。首先要明确：它本质上是操作系统级的媒体查询，用于响应用户在系统设置中开启的“减少运动”偏好，例如 macOS 的“减少运动”、Windows 的“显示设置→动画效果”、iOS 的“辅助功能→动态效果”。许多开发者的第一反应是在 CSS 中添加一条 @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }，以为这样就能解决所有问题——但这么做其实很危险，粗暴禁用所有动画，连那些对功能至关重要的过渡也会被关闭，比如模态框淡入之后的焦点自动捕获、菜单展开时依靠 height 过渡保障的可滚动性。反而会把可访问性搞得一团糟。

CSS 中如何安全响应 prefers-reduced-motion？

关键不在于“把动画都关了”，而是“降级为对无障碍友好的行为”。优先考虑用 transform 和 opacity 做瞬时切换，尽量避开那些依赖时间轴的复杂关键帧动画。对于那些必须保留的过渡，缩短时长并禁用掉位移类的变化。

• 用 transition 替代 animation：transition 更容易被媒体查询精准控制
• 拆分动画层级：把耗时动画分成视觉层（可以禁用）和结构层（不可禁用）。例如菜单展开用 max-height 过渡（结构相关），而背景色变化用 animation（纯视觉）
• 精准重置：在 @media (prefers-reduced-motion: reduce) 中只重置动画属性，不要动布局和焦点逻辑。

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
  }
  /* 保留 opacity 过渡，确保元素不会突兀出现 */
  [aria-expanded="true"],
  .is-open {
    opacity: 1;
    transition: opacity 0.1s ease;
  }
}

JavaScript 如何配合检测和降级？

光靠 CSS 无法处理 JS 驱动的动画，例如 requestAnimationFrame 实现的滚动视差、Canvas 动画、第三方库中的轮播。务必要主动读取 matchMedia 的状态，在初始化和运行过程中实时响应变化。

• 用 window.matchMedia("(prefers-reduced-motion: reduce)").matches 判断初始状态
• 监听变更：matchMedia 支持 addEventListener("change", handler)（注意 Safari 旧版需要改用 addListener）
• 对 JS 动画做“条件执行”，避免“条件销毁”。例如轮播组件中：if (!reducedMotion) { startAutoSlide() }，而不是在 reduced 模式下强行暂停后又恢复
• 在 reduced 模式下，避免调用 scrollIntoView({ behavior: "smooth" })，改用 scrollIntoView()（不带 behavior 参数）

一个实用的示例：

const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

function handleMotionChange(e) {
  if (e.matches) {
    // 关闭 canvas 动画循环
    cancelAnimationFrame(animationId);
    // 禁用自动轮播
    carousel.stop();
  } else {
    carousel.start();
  }
}

motionQuery.addEventListener("change", handleMotionChange);
// 初始化
handleMotionChange(motionQuery);

哪些动画绝对不该被禁用？

无障碍的核心原则是：不为了省事而牺牲功能。以下这些动画，即使在 reduce 模式下也应该保留，或者至少提供功能上等效的替代方案：

• :focus-visible 的 outline 动画：这是键盘导航的生命线，禁用掉等于切断了键盘用户的操作路径
• 表单验证的即时反馈：比如输入框边框变红，同时错误文字滑入。这里的滑入可以用 max-height 加 overflow: hidden 来实现，比 animation 更可控
• 加载状态指示器：按钮点击后从图标变成“loading...”文本，纯文字变化本身不需要动画。但如果用了旋转图标，得替换成静态图标，再加上 ARIA live region 通知
• 模态框遮罩层淡入：必须保留，否则屏幕阅读器很可能识别不到它的存在，最后导致焦点卡住出不来

真正该被降级的，是那些纯装饰性的、高频闪烁的、或者容易引发前庭障碍风险的动画——比如背景粒子、无限滚动的波纹、自动跳转的幻灯片。这才是真正需要动手处理的地方。