动画和动作

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

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

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

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

闪烁和移动的内容

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

WCAG 关于闪烁的指南建议避免以下情况：

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

这些闪烁可能会导致无法使用网页，或者更糟的是导致疾病。

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

您还应该问自己，动画和运动的元素移动对于理解屏幕上的内容或操作是否至关重要。如果不是必需的，请考虑从您构建或设计的元素中移除所有运动（即使是微小的运动）。

假设您认为元素的运动并非必需，但可以提升用户的整体体验，或者您因其他原因无法移除运动。在这种情况下，您应遵循 WCAG 关于运动的 指南。该指南规定，您必须为用户构建一个选项，以便他们暂停、停止或隐藏以下运动：非必需的移动、闪烁或滚动元素，这些元素会自动启动、持续时间超过 5 秒，并且是其他页面元素的一部分。

暂停、停止或隐藏运动

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

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

使用媒体查询

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

@prefers-reduced-motion

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

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

在 macOS 和 Android 上，用户可以开启设置以减少运动。在 macOS 上，用户可以在“设置”>“辅助功能”>“显示”中设置减少运动 。 Android 的设置是移除动画 。在 Windows 上，该设置以肯定方式呈现为 显示动画，默认处于开启状态。用户必须关闭此设置才能减少运动。

为了确保运动障碍人士的无障碍体验，即使动画时长低于 WCAG 2.0 AA 指南中概述的 5 秒阈值，也应谨慎处理，最可靠的方法是让用户能够完全控制动画，从而让用户能够使用专用控件（例如播放按钮和暂停按钮）分别启动和停止动画。

运动的渐进增强

作为设计人员和开发者，我们需要做出很多选择，包括默认运动状态和要显示的运动量。请再次查看有关运动的最后一个示例。

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

我们无法预测什么程度的运动会导致癫痫发作、前庭功能障碍和其他视觉障碍患者出现问题。即使屏幕上只有少量运动，也可能会引发眩晕、视力模糊或更严重的问题。因此，在以下示例中，我们默认不使用动画。

分层媒体查询

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

允许用户选择

虽然在数字产品中构建动画以让用户感到愉悦可能很有趣，但我们必须记住，有些人会受到这些设计的影响。 运动敏感性可能会影响任何人，从轻微不适到导致严重疾病或癫痫发作。

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