访客的减弱运动偏好可以引导网页选静态或少运动展示,但 CSS 媒体查询不会自动停下每个视频和动画。应有意设计替代并测真实页面。静态版需要保留必要视觉信息,不能随手拿运动序列的空白第一帧当回退。
先确定运动贡献什么
列出运动是装饰、展示前后差别,还是在中途揭示信息。必要内容应适当放在普通正文和已审静态图中,访客不等待运动也应理解用途。原动图或视频与批准静态版分别保存,标注两者关系。
随机视频帧可能是闭眼、中间变形或主体不可辨,不能因为能导出就作为替代。选适合静态阅读的视觉,同时诚实解释它代表什么;不能让静态页面遗漏动态版才有的必要说明或行动入口。
检查实现覆盖范围
MDN 的 prefers-reduced-motion 参考说明 CSS 媒体特性检测用户偏好,但各组件如何响应,需要网站实施者决定。让 CSS 效果停止,不等于 HTML 视频或第三方播放器也停止。
列出真实运动来源:CSS、动画图片、原生视频、嵌入播放器,分别选择支持的替代。暂停按钮和响应偏好的默认状态服务不同目的,不能互相替代。应观察访客最终看到什么,而非仅检查代码里出现了查询名称。
一个肖像网页的假设回读
假设作品集主视觉是动态肖像,标题说明视觉处理。计划测试普通与减弱运动两种偏好,后一状态显示可识别主体的批准静态图,标题和查看选择仍可用。表格记录初始视觉、持续运动、必要信息及可选控制。
这是待执行实现测试,不是已验证页面。背景影片与装饰叠层分别检查:上层停了但后面的片仍无意运动,也不能通过。还要测重新加载页面后的初始状态,而不是只在开发者切换样式后观察一次。
信息和行为分别批准
通过条件是减弱运动状态行为符合计划,仍有理解页面所需信息。空白回退、说明丢失、播放器忽略偏好却仍声称已支持,都应拒绝。在目标支持设备与设置下回读真实页面,并记录所测范围。
闪光效果另需评估,静态替代不能证明运动版满足闪光要求或整个页面符合所有无障碍标准。保存动静资产和实现说明。Imagild 的 Skills可开发视觉,运动偏好与网页整合在外部流程完成;有效替代应完整、有意并在用户实际页面验证。