无障碍性考量

相关源文件

• README.md
• SECURITY.md
• docsSource/compileMD.js
• docsSource/sections/08-accessibility.md
• docsSource/sections/09-license-contributing.md

本文档解释了 Animate.css 内置的可访问性功能，并提供了实现动画的最佳实践，以便所有用户都能访问，特别是那些患有前庭障碍或对运动敏感的用户。有关动画系统的常规用法，请参阅用法指南，有关 JavaScript 集成详细信息，请参阅JavaScript 集成。

概述

动画可以增强用户体验，但对于患有前庭障碍、运动敏感或其他可访问性需求的用户来说，可能会引起不适甚至身体症状。Animate.css 通过实现 prefers-reduced-motion 媒体查询，内置支持尊重用户关于运动的偏好。

来源：README.md27-29 docsSource/sections/08-accessibility.md1-4

Prefers-Reduced-Motion 实现

Animate.css 无需开发人员的任何额外代码即可自动尊重用户关于减少运动的系统级偏好。这是通过媒体查询实现的，媒体查询可以检测用户的偏好并在必要时禁用动画。

当用户在其操作系统偏好设置中启用了“减少运动”时，prefers-reduced-motion 媒体查询将被触发，这会导致所有动画持续时间设置为一个不易察觉的短时间（0.001ms），并将所有动画限制为一次迭代，从而在保留功能的同时有效地禁用它们。

来源：README.md27-29 docsSource/sections/08-accessibility.md1-4

平台和浏览器支持

prefers-reduced-motion 媒体查询在现代平台和浏览器中得到了广泛支持。这确保了大多数需要减少或消除运动的用户都能有效做到这一点。

平台	浏览器	支持状态
Windows	Chrome	支持
	Firefox	支持
	Edge	支持
macOS	Safari	支持
	Chrome	支持
	Firefox	支持
iOS	Safari	支持
Android	Chrome	支持
	Firefox	支持

来源：docsSource/sections/08-accessibility.md1-4

用户体验流程

下图说明了用户偏好在整个动画系统中是如何被尊重的

来源：README.md27-29 docsSource/sections/08-accessibility.md1-4

与动画类的集成

此图显示了可访问性功能如何与 Animate.css 中的动画类系统集成

来源：docsSource/sections/08-accessibility.md1-4

可访问动画的最佳实践

使用 Animate.css 时，请考虑以下最佳实践，以确保您的动画是可访问的

1. 依赖对 prefers-reduced-motion 的内置支持

   • 该库会自动处理此偏好，但请注意其工作原理。

2. 避免使用对功能至关重要的动画

   • 动画应增强体验，而不是成为基本功能的必需品。
   • 禁用动画的用户仍应能够使用所有功能。

3. 为重要的动画内容提供替代方案

   • 如果动画传达了重要信息，请提供文本替代方案。

4. 考虑动画的强度

   • 为较大的元素选择强度较低的动画。
   • 对于重要的 UI 元素，使用更微妙的动画（如 fadeIn）而不是戏剧性的动画（如 bounce）。

5. 限制动画持续时间

   • 较短的动画通常不太可能引起不适。
   • 对于可能引起问题的动画，使用 animate__faster 实用类。

6. 避免自动播放重复动画

   • 对于非必需元素，限制使用 animate__infinite 类。
   • 考虑用户触发的动画，而不是自动动画。

来源：README.md27-29 docsSource/sections/08-accessibility.md1-4

开发人员的手动控制

虽然 Animate.css 会自动尊重 prefers-reduced-motion 设置，但开发人员可能希望为用户提供额外的控件。下图说明了一种实现手动动画切换的模式

实现自定义动画切换的示例

注意：animate__no-animation 类是建议的实现，并非 Animate.css 核心库的一部分。您需要在自己的 CSS 中定义此类别。

来源：README.md27-29 docsSource/sections/08-accessibility.md1-4

其他可访问性考量

在 Animate.css 中实现动画时，请考虑以下其他可访问性因素

1. 动画时序

   • 请注意对患有认知障碍的用户而言的动画速度和持续时间。
   • 必要时使用 animate__slow 和 animate__fast 等实用类来调整时序。

2. 内容闪烁

   • 避免动画闪烁（每秒超过 3 次）。
   • 请谨慎使用可能引发光敏性癫痫发作的动画，例如 animate__flash。

3. 焦点管理

   • 确保动画不会干扰键盘焦点。
   • 动画元素应保持正确的焦点顺序和可见性。

4. 页面性能

   • 过多的动画会降低性能，这会不成比例地影响辅助技术用户。
   • 限制页面上同时发生的动画数量。

5. 测试

   • 在禁用动画的情况下测试您的网站。
   • 使用浏览器开发者工具来模拟 prefers-reduced-motion 设置。

来源：README.md27-29 docsSource/sections/08-accessibility.md1-4

符合可访问性标准

使用 Animate.css 的内置可访问性功能有助于满足以下可访问性指南

标准	指南	Animate.css 如何提供帮助
WCAG 2.1	2.3.3 交互触发的动画（AAA）	尊重用户减少运动的偏好
WCAG 2.1	2.2.2 暂停、停止、隐藏（A）	可以通过 prefers-reduced-motion 暂停
Section 508	1194.22 (j)	提供避免引起身体不适的机制

来源：README.md27-29 docsSource/sections/08-accessibility.md1-4

结论

Animate.css 通过实现对 prefers-reduced-motion 媒体查询的支持，认真对待可访问性，确保有运动敏感性的用户能够愉快地浏览网站而不会感到不适。通过遵循本文档概述的最佳实践，开发人员可以创建引人入胜的动画体验，并且所有用户都能访问。

请记住，动画应增强用户体验，而不是造成访问障碍。在您的项目中使用动画时，请始终优先考虑可访问性。

来源：README.md27-29 docsSource/sections/08-accessibility.md1-4