本页面借助 AI 辅助翻译。英文原文为权威版本。
阅读是一种运动行为。眼睛并不沿着文字行平滑滑动，而是以扫视跳跃、以注视着陆，理解发生在着陆之中。页面上任何移动的东西都在争夺这些着陆点。运动是视觉系统最强烈的注意信号——一种无法凭意志关闭的进化警报——这就是为什么文字附近的动画元素对阅读如此具有腐蚀性，为什么自身在移动的文字几乎完全不可读。
现代网页浸泡在动效之中：入场动画、视差布景、滚动触发的显现、自动轮播。其中一部分是工艺。更多的是以读者为代价的装饰。而对一类读者来说，它比干扰更糟。
前庭障碍：作为伤害的动效
对前庭障碍——内耳与平衡系统的疾患——患者而言，屏幕上的运动可能引发眩晕、恶心、天旋地转和头痛，且在移开视线之后仍久久不散。触发因素十分具体，受影响的用户描述得很清楚：大型元素滑过视口、缩放与比例变化效果、以不同速度移动的视差图层，以及让眼睛所见与手部动作脱钩的滚动联动动画。这不是不悦，而是身体反应，更接近晕动症而非审美上的反感。一个页面可以让读者生病。
WCAG 在 2.3.3（交互引发的动画）中处理了这一问题：由交互触发的运动动画应当可以禁用，除非该动画是必要的。它是 AAA 级准则——这低估了它的重要性：对受影响的人群，这不是锦上添花，而是可用与不可用的分界。
读者的开关：prefers-reduced-motion
每个主流操作系统如今都提供"减弱动态效果"设置，prefers-reduced-motion 媒体查询把它暴露给样式表与脚本。尊重它是负责任实践的硬性要求，而非渐进增强，理由很简单：设置它的人，是因为动效伤害了他们。无视这一设置，就是无视一项明确提出的医疗适配。
把它做好，不只是把动画关掉：
- 用不透明度取代位移。淡入传达"它出现了"，却不让任何东西横穿屏幕；在滑动与缩放不被容忍的地方，交叉淡化被广泛接受。
- 在减弱动效下彻底禁用视差与滚动联动效果——不存在值得保留的"减弱版"视差。
- 在 JavaScript 驱动的动画中同样应用该偏好，而不只是 CSS；媒体查询可从脚本中查询，动画库可以据此设置开关。
- 不要把"减弱"理解为"去除一切状态变化"。瞬时切换同样令人迷失；目标是消除无谓的空间位移，而不是消除反馈。
移动的文字是不可读的文字
滚动、跑马、滑动或闪烁的文字，会直接击溃扫视与注视的阅读机制。低视力读者、使用放大工具的读者（移动的目标可能在一个词读到一半时滑出放大区域）、有阅读障碍或注意力困难的读者，以及单纯读得慢的读者，都受到不成比例的惩罚：他们还没读完，文字就走了。
WCAG 2.2.2（暂停、停止、隐藏）——A 级准则，最低且最没有商量余地的层级——要求任何自动开始且持续超过五秒的移动、闪烁或滚动内容，必须提供暂停、停止或隐藏的机制。迄今最常见的违例者是自动轮播，尤其是承载文字的轮播。按计时器轮换的轮播保证了某些读者永远读不完一张幻灯片；"暂停"控件即便存在，也往往极小、无标签，或者只有在它本应避免的挫败发生之后才能被发现。如果内容重要，它就值得静止。如果它自动轮换，设计就已经承认它并不重要——那么它只应在读者的操控下前进。
滚动触发的文字效果尤其值得怀疑：进入视口时才淡入的段落、逐个字母拼装的标题、背景滚动时被钉住的文字。每一种都在读者与文字之间插入了一段动画。读者是来阅读的；让文字就在那里。
尊重阅读的动效
这一切并不是在主张一个静态的网页。动效有正当的工作：表明操作已被受理、展示被关闭的面板去了哪里、把目光引向本会被错过的变化。服务于此的动效短促、微小、少见，并且绝不施加于正文。一组有用的检验：
- 这个动效传达了读者需要的信息，还是装点了设计师喜欢的东西？
- 它是否靠近或叠加在某人正在阅读的文字上？
- 它是只运行一次、时间短暂，还是循环播放？
- 它是否完整地尊重
prefers-reduced-motion？
本章为何是新增的
第一版成书时，使本章成为必要的条件尚不存在。2005 年，CSS 无法制作动画；像样的动效需要 Flash，而围绕它的无障碍讨论集中于闪烁与癫痫风险，而非前庭伤害。prefers-reduced-motion 查询直到 2017 年才出现在浏览器中，WCAG 2.3.3 随 2.1 版于 2018 年到来，而现代网页那种滚动触发、动画饱和的流行风格比这还要年轻。动效变得廉价；克制的纪律，正是这份指南如今能够补上的东西。
在 CSS 中
/* Default: entrance combines movement and fade */
.reveal {
animation: slide-fade-in 300ms ease-out;
}
@keyframes slide-fade-in {
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: none; }
}
/* Reduced motion: keep the fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
.reveal {
animation: fade-in 200ms ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Coarse safety net for unaudited animation — a last
resort, not the practice; it also removes the fades
and feedback worth keeping */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}建议
- 在所有地方——CSS 与 JavaScript——把尊重
prefers-reduced-motion当作硬性要求。 - 在减弱动效下，用淡入淡出取代滑动与缩放；彻底移除视差与滚动联动效果。
- 绝不为正文添加动画。阅读与运动是敌人。
- 满足 WCAG 2.2.2：任何自动运动超过五秒的内容都需要可见的暂停、停止或隐藏控件。
- 不要用自动轮播承载有意义的内容；如果已经存在，让读者来驱动它。
- 让有目的的动效保持短促、微小、不循环，并远离正在被阅读的文字。
- 开启操作系统的减弱动效设置测试关键页面；把任何残存的空间位移动画当作缺陷处理。