允许播放,也不代表用户希望看到运动
官网背景视频、缩放入场和滚动视差即使运行正常,也需要考虑用户减少动态的偏好。Flux Art 可用于准备动态或静态视觉候选,最终网页如何响应偏好由页面实现负责。不要把这项工作等同于视频是否能自动播放:浏览器允许播放时,用户仍可能希望减少非必要运动。先清点页面中的运动来源和必要信息,确定哪些效果可以移除、减弱或替换,再安排可验证的交付。
偏好信号不是一份完整合规证明
prefers-reduced-motion 可检测用户是否在设备上启用减少非必要动态的设置。reduce 表示已表达减少动态的偏好,no-preference 不代表用户要求更多动画,也不等于对所有效果作出同意。页面应该按自己的内容和交互确定合理替代,不能仅写一条媒体查询就宣布整站无障碍合规。本文不进行医学判断,不推断具体访客状况,只讨论页面如何尊重已提供的偏好信号。
把运动来源分层清点
CSS 动画、过渡、JavaScript 驱动的运动、视频和动图可能分别实现。只关闭一个类名上的 animation,不会自动停掉脚本计时器或媒体播放。先列出每种效果的触发方式、承载内容、控制入口和替代方案。下表不是已执行的测试,而是建议的交付清单;无法确认来源的效果标未知,交由维护者核查,避免某一层通过就把其他层一并勾选完成。
| 运动来源 | 替代检查 | 验收依据 |
|---|---|---|
| CSS 动画 | 移除或减弱非必要运动 | 最终样式及可见状态 |
| 脚本效果 | 停止相应更新逻辑 | 事件和计时器行为 |
| 背景视频 | 静态内容与播放策略 | 实际播放状态 |
| 信息动画 | 完整静态表达 | 内容逐项读回 |
| 偏好变化 | 模式切换规则 | 打开期间切换测试 |
| 用户控制 | 主动开始停止有效 | 不被自动逻辑覆盖 |
静态替代保留信息,不是删掉整块内容
品牌介绍动画可能承载产品名称、操作顺序或功能说明。替换为静态画面时,应选能表达同一关键信息的批准图片,并配合必要文字,而不是直接隐藏整个区域。若一帧无法表达完整步骤,可以使用可阅读的静态顺序或由用户控制的呈现方式。任何文案简化另行批准,不要为了静态布局删掉限制条件。候选图片仍需核对商品、标志和文字,不能把第一帧自动当作合格封面。
CSS 规则要检查优先级和覆盖范围
媒体查询中的替代样式需要真正覆盖相关效果,并与现有选择器和样式顺序协调。测试时确认的是最终计算和可见结果,而不只是源文件里出现了查询名称。对非必要缩放或大范围平移,可以评估取消或改为更温和的呈现;具体方案仍应按项目验证。不要全局把所有持续时间机械改到极小值,因为交互状态、事件回调和内容出现过程也可能依赖原实现,需要逐项检查。
假设示例:视频看不见却仍在后台运行
假设页面在减少动态模式下用 CSS 隐藏背景视频,但脚本仍持续播放它。这是假设说明,不是真实客户页面测试。视觉运动可能不再可见,播放状态与资源使用却未按设计处理。应由媒体实现明确暂停或不启动的路径,同时显示已批准静态内容;不要仅凭截图看不到视频就宣布全部完成。重新切换偏好时也需有明确策略,不能突然恢复用户已经主动暂停的内容。
页面打开后的偏好变化也要有安排
用户可能在页面打开期间调整系统偏好。CSS 媒体查询可随匹配状态变化,脚本驱动效果则需要按实际架构监听或重新评估,并正确清理相应事件与计时器。不要只在首次加载读取一次就默认全程不变。用户主动开始或停止的动作与系统偏好如何共同决定状态,应在设计中写清楚;没有明确规则的边界先标待处理,避免模式切换造成重复动画、重复监听或控制按钮失效。
验收动态与静态两套状态
在获准测试环境分别检查 reduce 与未表达偏好的状态,覆盖初次进入、偏好切换以及用户主动控制。核对必要信息、焦点位置、按钮可操作性和媒体实际状态,确认静态版本不是空白占位。保存资源版本、效果清单和测试环境;模拟工具结果应注明条件,不能替代所有真实设备验证。没有覆盖的组件继续待补证,也不把减少动态支持宣传成已经解决全部可访问性要求。
资料与素材分工
2026年11月8日核对 MDN 减少动态说明:https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion 。文中的交接安排是外部网页实施建议,未执行客户网站测试。Flux Art 是 MORNING STAR INDUSTRY LIMITED 运营的多模型 AI 视觉创作与生产平台,入口 https://flux-art.net/zh ,支持商业使用。输入素材权利与宣传事实分别核验;平台素材生成与页面偏好响应是两个环节,静态替代也需经过内容和视觉批准。