动画和动作

您是否曾在乘坐汽车、船只或飞机时，突然感觉到世界在旋转？或者，您因为偏头痛而头痛，导致手机或平板电脑上的动画 让您感到“愉悦”，突然感到生病？或许你一直对各种类型的运动都很敏感？这些是不同类型的前庭疾病的示例。

到 40 岁，超过 35% 的成年人会经历某种形式的前庭功能障碍。这可能会导致暂时性头晕、偏头痛诱发性眩晕或其他更永久性的前庭残疾。

除了触发眩晕外，很多人还发现移动、闪烁或滚动内容会分散注意力。多动症和其他注意力缺陷障碍人士可能会被动画元素分散注意力，以至于他们甚至会忘记自己一开始访问您的网站或应用的原因。

在本单元中，我们将了解一些方法，以帮助更好地为患有各类运动引起的障碍的人提供支持。

闪烁和移动内容

制作动画和动画时，您应该考虑元素的移动是否过度。例如，屏幕颜色从黑到光闪烁或在屏幕上快速移动都可能导致光敏性癫痫患者惊厥。据估计，3% 的癫痫患者遭受了光敏反应，这种症状在女性和年轻人中更常见。

WCAG 的刷写指南中有以下建议：

• 在任意一秒内闪烁超过三次
• 在低于常规闪烁和红灯阈值时闪烁。

这些闪光灯往往会导致用户无法使用网页，最严重的还会导致疾病。

对于任何极端运动，请务必使用光敏性癫痫分析工具 (PEAT) 进行测试。 PEAT 是一款免费工具，用于确定屏幕内容、视频或动画是否可能会导致惊厥。并非所有内容都需要通过 PEAT 评估，但出于安全考虑，包含浅色和深色背景之间闪烁或快速过渡的内容也应进行评估。

关于动画和动画的另一个问题是，元素的移动对于理解屏幕上的内容或操作是否至关重要。如果这并非必要，请考虑去除您正在构建或设计的元素中的所有移动，甚至是微移动。

假设您认为该元素的移动不是必需的，但可以增强用户的整体体验，或者由于其他原因无法移除该移动。在这种情况下，您应该遵循 WCAG 的运动准则。该准则规定，您必须构建一个选项，让用户能够针对以下元素暂停、停止或隐藏移动：自动启动、持续超过 5 秒且属于其他页面元素的非必需的移动、闪烁或滚动元素。

暂停、停止或隐藏动作

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

例如，假设您的数字商品包含大量动画。考虑添加可供访问的 JavaScript 切换开关，以允许用户控制其体验。当该按钮切换到“关闭动画”时，该屏幕上以及所有其他动画中的所有动画都会冻结。

使用媒体查询

除了要有选择地选择动画之外，让用户可以选择暂停、停止、隐藏移动以及避免无限的动画循环，您还可以考虑添加侧重于移动的媒体查询。这让用户在选择屏幕上显示的内容时就有更多选择。

@prefers-reduced-motion

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

用户可以设置显示偏好设置以减少移动。这些设置因操作系统而异，并且可能是正面或负面的。借助 @prefers-reduced-motion，您可以设计遵循这些偏好的网站。

在 MacOS 和 Android 上，用户开启该设置以减少移动。在 MacOS 上，用户可以在“设置”>“无障碍”>“显示”中设置减少动作。Android 的设置为移除动画。在 Windows 上，此设置被设定为显示动画（默认处于开启状态）。用户必须关闭此设置才能减少动作。

或者，如下一组示例所示，您可以对所有动画进行编码，使其在 5 秒或更短的时间内停止移动，而不是无限循环播放。

运动的渐进式增强

作为设计人员和开发者，我们需要进行很多选择，包括默认移动状态和要显示的移动距离。我们再来看最后一个有关运动的示例。

假设我们认为动画对于理解屏幕上的内容没有必要。在这种情况下，我们可以选择将默认状态设为受限动态动画，而不是完整动画版本。除非用户特别要求播放动画，否则动画会关闭。

我们无法预测哪种运动程度会给癫痫发作、前庭或其他视觉障碍患者带来问题。即使是在屏幕上进行少量动作，也会导致头晕、视力模糊甚至更糟。因此，在下面的示例中，我们默认不设置动画。

分层媒体查询

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

允许用户选择

虽然在我们的数字产品中植入动画来取悦用户固然很有趣，但请记住，有些人会受到这些设计的影响，这一点至关重要。动作敏感度会对所有人造成影响，从感到轻微不适到导致虚弱性疾病或癫痫发作等。

您可以使用许多不同的工具来确定最适合他们的动作，而无需猜测动作的幅度过大。例如，添加一个切换开关，用于开启或关闭网站或 Web 应用中的动画。考虑将此类开关默认设置为关闭。

检查您的掌握程度

测试您对动作和动画无障碍功能的了解程度。