动画和动作

您是否曾在乘坐汽车、船只或飞机时突然感到天旋地转？或者，您是否曾出现过偏头痛，导致手机或平板电脑上原本用来“愉悦”您的动画突然让您感到不适？或者，您一直对所有类型的动作都很敏感？以下是不同类型的耳石病示例。

在 40 周岁时，超过 35% 的成年人会出现某种形式的前庭功能障碍。这可能会导致暂时性头晕、偏头痛诱发的眩晕或更为永久性的前庭功能障碍。

除了会诱发眩晕外，许多人还会觉得移动、闪烁或滚动的内容会分散注意力。患有ADHD和其他注意力缺陷障碍的用户可能会被您的动画元素分散注意力，以至于忘记自己最初访问您的网站或应用的原因。

在本单元中，我们将介绍一些有助于更好地为所有类型的运动诱发性障碍患者提供支持的方法。

闪烁和移动的内容

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

WCAG 的有关闪烁的准则建议避免以下做法：

这些闪烁现象在最好的情况下会导致无法使用网页，在最糟糕的情况下会导致生病。

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

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

假设您认为元素的移动不是必需的，但可以提升用户的整体体验，或者您出于其他原因无法移除移动效果。在这种情况下，您应遵循 WCAG 的动作准则。准则规定，您必须构建一个选项，供用户暂停、停止或隐藏以下元素的移动：自动启动、持续时间超过 5 秒且属于其他网页元素的非必需移动、闪烁或滚动元素。

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

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

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

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