动画和动作

您是否曾在乘坐汽车、船只或飞机时突然感觉天旋地转？或者，您是否曾因偏头痛而感到不适，以至于手机或平板电脑上旨在让您“愉悦”的动画突然让您感到恶心？或者，您可能一直对所有类型的运动都比较敏感？以下是不同类型的前庭障碍的示例。

到 40 岁时，超过 35% 的成年人会经历某种形式的平衡障碍。这可能会导致暂时性眩晕、偏头痛引起的眩晕，或更严重的永久性平衡障碍。

除了会引发眩晕之外，许多人还发现移动、闪烁或滚动的内容会让人分心。患有 ADHD 和其他注意力缺陷障碍的用户可能会因您的动画元素而分心，以至于忘记他们最初访问您的网站或应用的目的是什么。

在本模块中，我们将介绍一些方法，以更好地帮助患有各种运动触发障碍的人。

闪烁和移动的内容

在构建动画和动态效果时，请自问元素的移动是否过度。例如，颜色从深到浅的闪烁或屏幕上的快速移动可能会导致光敏性癫痫患者发作。据估计，3% 的癫痫患者患有光敏性癫痫，这种疾病在女性和年轻人中更为常见。

WCAG 的闪烁内容指南建议避免以下情况：

• 在任意一秒内闪烁超过 3 次
• 闪烁低于一般闪烁和红色闪烁阈值。

这些闪烁可能会导致用户无法使用网页，严重时甚至会导致疾病。

对于任何极端运动，您都必须使用光敏性癫痫分析工具 (PEAT) 进行测试。PEAT 是一款免费工具，用于识别屏幕内容、视频或动画是否可能导致癫痫发作。并非所有内容都需要由 PEAT 进行评估，但包含闪烁或在浅色和深色背景颜色之间快速过渡的内容应进行评估，以确保安全。

关于动画和动态效果，您还应问自己另一个问题：元素移动对于理解屏幕上的内容或操作是否至关重要。如果不是必需的，请考虑从您构建或设计的元素中移除所有移动效果，甚至是微小的移动效果。

假设您认为元素的移动不是必需的，但可以提升用户的整体体验，或者您因其他原因无法移除移动效果。在这种情况下，您应遵循 WCAG 的动态效果指南。根据相关准则，您必须为用户提供暂停、停止或隐藏以下内容的选项：自动开始、持续时间超过 5 秒且属于其他网页元素的非必要移动、闪烁或滚动元素。

暂停、停止或隐藏动态效果

在网页中添加暂停、停止或隐藏机制，以便用户关闭可能存在问题的动态动画。您可以在屏幕级或元素级执行此操作。

例如，假设您的数字产品包含大量动画。 考虑添加无障碍 JavaScript 切换开关，以便用户控制自己的体验。当按钮切换为“动作关闭”时，该屏幕和所有其他屏幕上的所有动画都会冻结。

使用媒体查询

除了谨慎选择动画、为用户提供暂停、停止、隐藏动画和避免无限动画循环的选项之外，您还可以考虑添加以动画为重点的媒体查询。这样一来，用户在选择屏幕上显示的内容时便有了更多选择。

@prefers-reduced-motion

与 color 模块中侧重于颜色的媒体查询类似，@prefers-reduced-motion 媒体查询会检查与动画相关的用户操作系统设置。

用户可以设置显示偏好设置来减少动态效果。这些设置在不同操作系统中有所不同，并且可能以肯定或否定的方式呈现。 借助 @prefers-reduced-motion，您可以设计一个尊重这些偏好设置的网站。

Browser Support

• 74
• 79
• 63
• 10.1

Source

在 macOS 和 Android 上，用户可以开启此设置来减少动态效果。在 macOS 上，用户可以在“设置”>“无障碍功能”>“显示器”中设置减少动态效果。Android 的设置是移除动画。在 Windows 上，该设置以肯定性措辞表示，即显示动画，默认处于开启状态。用户必须关闭此设置才能减少动态效果。

注意： 由于每个界面使用的语言不同，请考虑仍然允许用户自行选择，而不是猜测多少动画才算过多。 具体情况可能因情况而异。

为确保行动不便的用户能够顺利访问，即使是短于 WCAG 2.0 AA 指南中规定的 5 秒阈值的动画，也应谨慎处理。最可靠的方法是，让表明偏好减少动画的用户能够完全控制动画，允许他们使用专用控件（例如播放按钮和暂停按钮）来启动和停止动画。

运动方面的渐进增强

作为设计师和开发者，我们需要做出很多选择，包括默认的运动状态以及要显示的运动量。我们再来看一下最后一个关于运动的示例。

假设我们认为动画对于理解屏幕上的内容是不必要的。在这种情况下，我们可以选择将默认状态设置为精简版动态动画，而不是完整版动态动画。除非用户明确要求使用动画，否则动画处于关闭状态。

注意： 可用的动态偏好设置取决于操作系统。有些主题允许您选择启用动画，而有些主题则要求您选择停用动画。

我们无法预测何种程度的运动会对患有癫痫、前庭障碍和其他视觉障碍的人造成问题。即使屏幕上只有少量动态效果，也可能会导致头晕、视力模糊，甚至更严重的症状。因此，在以下示例中，我们默认不显示动画。

分层媒体查询

您可以使用多个媒体查询，为用户提供更多选择。您可以同时使用 @prefers-color-scheme、@prefers-contrast 和 @prefers-reduced-motion。

允许用户选择

虽然在数字产品中添加动画来取悦用户很有趣，但我们必须记住，有些人会受到这些设计的影响。运动敏感症会影响任何人，轻则引起轻微不适，重则导致严重疾病或癫痫发作。

您可以使用多种不同的工具，让用户自行决定最适合自己的运动量，而不是猜测多少运动量才算过量。例如，添加一个切换开关，用于在网站或 Web 应用中开启或关闭动画。请考虑将此类切换开关默认设置为关闭。