动画和动作

你有没有在乘坐汽车、船或飞机时突然感受到这个世界的样子转动？或者因严重的偏头痛而在手机或平板电脑上播放动画；旨在“愉悦”的创作突然生病了？或许你一直对各种动作敏感？这些是不同类型的

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

除了诱发眩晕之外，许多人还会发现移动、眨眼或滚动屏幕容易让人分心的内容与多动症和其他注意力缺陷障碍的用户都可能被您的动画片分散注意力会忘记自己为何在访问网站或应用时访问了该网站或应用排名第一

在本单元中，我们将了解一些方式来帮助更好地支持人们所有类型的运动引起的障碍。

刷写和移动内容

制作动画和动作时，您应询问自己该元素的移动次数是否过多。例如，屏幕上从暗到浅的色彩闪烁或快速移动都可能会导致光敏性癫痫患者发作。据估计，3% 的癫痫患者患有光敏性，更常见于女性和年轻人。

WCAG 的刷写指南建议不要存在以下问题：

这些 Flash 代码最多可能会导致用户无法使用网页，更严重的是会导致疾病。

对于任何极端运动，您都必须使用光敏癫痫分析工具 (PEAT)。 PEAT 是一款免费工具，用于确定屏幕上的内容、视频或动画可能会引起癫痫发作并非所有内容都需要经过 PEAT 评估，但包含闪烁或明暗交替的内容为了确保安全，您需要评估背景颜色。

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

假设您认为该元素的移动不必要，但可以增强用户的整体体验，否则您无法为另一个用户原因。在这种情况下，您应遵循 WCAG 的动作准则。该准则规定，您必须构建一个选项，以便用户暂停、停止或隐藏移动：非必要的移动、闪烁或滚动元素自动开始，持续时间超过 5 秒，并且属于其他网页的一部分元素。

添加暂停、停止或隐藏按钮机制，让用户能够关闭可能存在问题的动画效果您可以在屏幕级别或元素级别执行此操作。

例如，假设您的数字商品包含大量动画。考虑添加一个可访问的 JavaScript 切换开关让用户能够掌控自己的体验将按钮切换到 “关闭动态效果”该屏幕以及其他所有动画均冻结。

除了选择性地制作动画外，您还可以为用户提供多种选择，您可以暂停、停止、隐藏动作以及避免动画无限循环播放，还可以考虑添加侧重于移动的媒体查询。这让您的用户为屏幕上显示的内容提供更多选择。

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

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

浏览器支持

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

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

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

假设我们认为动画对于理解屏幕上的内容没有必要。在该示例中，我们可以选择将默认状态设置为减少动作的动画，而不是完整的动作版本。除非用户特意要求显示动画，否则系统会关闭这些动画。

我们无法预测哪种程度的移动会给发作、前庭和其他视觉障碍。即使是一小部分动作可能会导致头晕、视力模糊，甚至更糟。因此，在在此示例中，我们默认不添加动画。

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

在数字产品中植入动画让人感到愉悦不仅很有趣，请务必注意，有些用户会受到这些设计的影响。运动灵敏度会影响任何人，包括轻微的不适感和导致导致衰弱的疾病或惊厥。

您可以使用多种不同的工具让用户决定最佳设置而不是猜测多大幅度的动作幅度过大。例如，添加用于在网站或 Web 应用内开启或关闭动画的切换开关。考虑则此类切换开关默认处于关闭状态。

测试您对动作和动画无障碍功能的知识掌握情况。

我们可以构建什么来反映操作系统的动作设置？

@prefers-reduced-motion

是的！通过此媒体查询，您可以根据用户的“显示”设置来决定使用多大幅度的动作。这些设置因操作系统而异，因此除了此媒体查询之外，还应考虑实现动作选择。

JavaScript 切换开关

不对。切换开关可让用户在访问您的网站后做出选择，但无法读取用户的设置。