暂停、停止、隐藏自动移动的内容
让用户能够控制轮播和视频。
暂停、停止、隐藏自动移动的内容 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
让用户掌控
如果内容会自行移动，用户就需要退出方式。WCAG 将自动移动内容的要求称为暂停、停止或隐藏。⏸️
什么算作自动移动
可以想想轮播图、自动切换的幻灯片、滚动字幕和循环播放的背景视频。任何无需用户操作就会动起来的内容都符合这一条件。
五秒规则
该标准针对的是持续超过五秒且与其他内容同时运行的动态效果。简短的开场动画不受此限制。
为什么这很重要
移动内容会夺走注意力，对于具有认知障碍或对动态效果敏感的用户来说，可能根本无法阅读。控制权可以把页面还给用户。
提供暂停控制
最简单的修复方式是真正的暂停按钮。让用户冻结轮播图，以便从容读完某一页幻灯片。
<button aria-label="Pause slideshow">Pause</button>停止比暂停更彻底
暂停后还可以继续，而停止会彻底结束动态效果。只要用户真正拥有控制权，二者都符合规则。
隐藏也是一种选择
有时，让用户完全隐藏移动元素才是最好的做法。在滚动字幕上提供关闭控制，可以直接移除干扰。
悬停和获得焦点时暂停
当用户悬停在轮播图上或通过制表键进入轮播图时，轮播图也应暂停，这样阅读或交互就不会与自动切换冲突。
让控制可触达
暂停按钮本身必须支持键盘操作，并带有清晰的标签。用户找不到的控制不算真正提供了控制。
与减少动态效果结合
最理想的做法是：对于减少动态效果的用户，不要自动播放。将偏好检查与可见的暂停控制结合起来。
@media (prefers-reduced-motion: reduce) {
.carousel { animation-play-state: paused; }
}跳过自动切换
说实话，许多轮播图完全不使用自动切换反而效果更好。让用户按照自己的节奏点击浏览，问题自然就消失了。
快速检查
暂停、停止或隐藏规则要求什么？
回顾
自动移动的内容需要由用户控制的暂停、停止或隐藏功能。确保它可通过键盘触达，并在减少动态效果时跳过自动播放。✅
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「暂停、停止、隐藏自动移动的内容」课时是免费的吗？
是的 — 「暂停、停止、隐藏自动移动的内容」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「暂停、停止、隐藏自动移动的内容」这节课中我会学到什么？
让用户能够控制轮播和视频。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「暂停、停止、隐藏自动移动的内容」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- CSS 和 JS 中的 prefers-reduced-motion
- 前庭障碍与视差风险
- 癫痫发作的三次闪烁阈值
- 暂停、停止、隐藏自动移动的内容