无障碍网页动画：WCAG 动画指南详解

没错，网页动画可以是无障碍的！有时只需要多花一点力气就能确保这一点。我们可以采取一些策略性措施来确保动画对无障碍性产生积极影响，例如规划它们如何 为整体用户体验做出贡献 以及 使用便捷性。我们还需要考虑更多战术层面的问题，以确保网站上的动画是无障碍的，而这正是 网页内容无障碍指南 (WCAG) 的作用所在。

虽然不同的上下文会影响您需要执行的操作细节，但 WCAG 为动画内容和交互提供了许多建议。其中包括何时提供暂停和播放控件的指南、屏幕闪烁或闪烁的限制，以及何时为对运动敏感的用户提供减少运动选项的建议。如果您有一段时间没有查看过，该规范已更新至 2.1 版，现在提供了更多关于如何设计无障碍网页动画的有用指导。

让我们更详细地探讨每一个建议，看看如何将它们应用到我们在网络上的工作中。

暂停、停止、隐藏

第一个专门针对动画的 WCAG 建议是 暂停、停止、隐藏。对于这个建议，标题就给出了关于该建议是什么的大概线索。它指出

对于任何（1）自动开始、（2）持续时间超过 5 秒，以及（3）与其他内容并行呈现的移动、闪烁或滚动信息，都应提供一种机制供用户暂停、停止或隐藏它，除非移动、闪烁或滚动是某个活动不可或缺的一部分；[…]

该建议专门适用于网页在没有用户交互的情况下发起的运动，一开始听起来可能像是与 UI 动画工作无关的内容。我们在 UI 动画工作中使用的大多数持续时间都远低于 5 秒的阈值。但有一些常见模式会适用此建议。例如：自动循环的轮播或幻灯片、动画背景或动画插图。虽然这些模式中每个单独的动画可能仍然非常短，但产生的整体运动通常会持续超过 5 秒。当这些动画设计为无限循环播放时，这一点尤其明显，这肯定比 5 秒要长。

如何满足暂停、停止、隐藏标准

如果您有一些持续时间较长的动画，则需要添加某种暂停和播放控件，以允许用户控制运动和/或自动播放行为。WCAG 规范没有规定这些控件的外观，您可以完全控制其设计。

实践中的一个很好的例子是文章系列 “网格的黑暗面” 如何处理示例动画。每个动画图形在开始后无限循环，因此它们为读者提供了一个播放/停止按钮，以便在他们想要查看动画时播放，并在完成时停止。文章中其他更具装饰性或说明性的动画会播放一次，然后提供一个按钮以供用户重播，如果他们愿意的话。按钮的放置和设计也符合文章整体设计的审美，这使得它们既实用又美观。

动画 GIF 也是需要注意的一点。如果您有一个循环播放的动画 GIF，则需要某种暂停/播放控件才能成功满足此标准。 本文中提到的两种技术 都对实现这一点很有帮助。

正如 WCAG 所指出的，此建议有一些例外情况。一个特别值得注意的例外是加载器和预加载器。

三次或低于阈值闪烁

这个建议可能是背后研究最多的一个，因为它源于广播电视的时代。该建议背后的主要原因是，屏幕上的强烈闪烁已知会引发癫痫发作。

简而言之， 三次或低于阈值闪烁 指出：

网页不包含任何在任何一秒钟内闪烁超过三次的内容，或者闪烁低于一般闪烁和红色闪烁阈值。

如何满足三次或低于阈值闪烁标准

WCAG 提供了有关尺寸、比率和视角阈值的详细信息，在这些阈值下，屏幕闪烁可被视为安全。但对于我们大多数人来说，最简单的办法可能是避免任何在一秒钟内闪烁超过三次的内容。我认为没有多少 UX 设计师会故意让屏幕过度闪烁，但这种情况确实可能发生。例如，追求电子游戏风格或故障美学的设计可能会包含一些每秒闪烁频率超过三次的屏幕闪烁。

包含大量闪烁的一个特定设计示例是来自赫芬顿邮报的这篇文章，如下所示。这是一篇关于千禧一代在工作和退休储蓄方面比前几代人更艰难的高风格文章。其故障 8 位电子游戏设计与文章主题非常吻合。从设计角度来看，它是主题的绝佳选择，并且执行得很好。但是，正如您从下面的逐帧静止图像中看到的，有时文本颜色在一秒钟内闪烁超过三次。

这种程度的闪烁可能会给癫痫患者或其他因闪烁而引发身体反应的人带来问题。值得称赞的是，赫芬顿邮报还为任何对闪烁敏感的人提供了文章的纯文本版本， 正如 Eileen 在这篇文章中提到的那样，以及对潜在闪烁危险的预先警告。

总的来说，避免需要频繁闪烁的效果是满足此标准最安全的方法。但是，如果您无法避免项目中的闪烁动画，WCAG 提供了 有关屏幕安全闪烁阈值的详细说明。此外，提供闪烁内容的预先警告以及没有闪烁效果的内容的替代版本（如上例所示）也是一件好事。

WCAG 的 A、AA 和 AAA 等级

WCAG 有多个标准和符合性级别，这就是每个建议都标注了其所属级别的原因。A 级符合性是最小的符合性级别。AA 级是中间符合性级别，表示已满足 A 级和 AA 级的标准。AAA 级是最高的符合性级别，需要满足 A 级、AA 级和 AAA 级的标准。通常，AAA 级的指南需要付出更多努力才能满足。（如果您想了解有关这些级别以及它们包含哪些内容（超出我们在此处介绍的与动画相关的建议），我在本文末尾列出了有用的资源。）

总的来说，大多数人在说他们正在构建一个无障碍网站时，目标是达到 AA 级符合性。这也是您可能在 RFP 或项目简介中看到的请求级别。我们讨论的最后两个指南属于 AA 级标准，因此必须满足这些标准才能声称达到 AA 级符合性。然而，下一个指南是 AAA 级标准的一部分。即使它超出了典型的符合性级别，但如果您项目严重依赖动画，则这是一个非常有用的建议，值得考虑。我强烈建议在您的工作中实施它。

交互动画

本指南涵盖的动画类型与前两个不同。前两个指南通常应用于网页本身触发的动画，而本指南则应用于用户交互触发的动画。更具体地说，它指出：

由交互触发的运动动画可以禁用，除非该动画对于功能或传达的信息至关重要。

初看，“运动动画”一词可能会令人困惑，因为我们通常可以互换使用“运动”和“动画”这两个词。起初它似乎过于具体，但在这种情况下，具体化是有意义的。WCAG 将运动动画定义为用于“创建运动错觉”的动画，并规定“运动动画不包括颜色变化、模糊或不透明度变化”。

从本质上讲，运动动画一词用于指示某些类型的动画会产生运动感，而另一些则不会。本指南关注的是那些产生运动感的动画。在讨论动画和可访问性时，牢记这种区别非常重要，这有助于确保您有效地集中精力。如果我们要用一个非常类似眼睛的维恩图来表达这种区别，它会是这样的

在过去的几年里，我们逐渐意识到，某些类型的屏幕运动，即使作为界面的一部分，也可能导致运动敏感人群出现身体不适。因此，这就是我们可能需要考虑在我们的作品中创建“减少运动”模式的原因。我在这篇文章中详细介绍了最有可能触发运动敏感人群的运动效果类型，并且WebKit 博客的这篇文章详细介绍了一些示例。

如何满足交互动画标准

WCAG 建议我们避免不必要的动画，为用户提供一个控件来关闭任何非必要的运动，或利用操作系统和用户代理中的“减少运动”设置。让我们更详细地了解一下这些方面。我们可以做一些不同的事情来帮助避免让人们接触到可能导致他们头晕、恶心或更严重后果的动画。

避免不必要的动画

上下文和预期也在这里发挥作用。您在电影或视频游戏的网站上可能遇到的运动量与您在政府网站或建筑公司网站上可能遇到的运动量大不相同。在视频游戏网站上非常合适的惊人效果，在政府网站上可能会显得不必要或不合适。考虑适用于您网站的上下文和预期，以及您设计中使用的动画数量是否符合该上下文。

为用户提供关闭可能存在问题的运动动画的方法

如果您的产品中存在可能触发运动敏感人群的运动，那么为用户提供一种避免这些触发动画的方法是负责任的做法。根据 WCAG 的定义，任何可能被视为运动动画的效果都应该包含一个简化版本。

视差效果就是一个很好的例子。根据我自己的研究，这些效果普遍对运动敏感人群存在问题，但它仍然是一种非常流行的技术。虽然完全停止所有视差效果是不现实的，但负责任地实施视差需要赋予用户一定程度的控制权来关闭这种触发运动。

通常，这被解释为包括一个切换按钮、设置或偏好设置，以便用户指示他们对减少运动的偏好，并在激活时提供这些运动动画效果的简化版本。Netlify 1 Million Devs 网站是运动切换按钮的一个示例，动物之森官方网站也提供了一个。

利用减少运动功能

那些不太依赖大量运动的网站或应用程序可能会发现，自定义切换按钮不是适合他们的策略，而是单独使用prefers-reduced-motion媒体查询。这使您能够在用户通过其操作系统全局设置此偏好时，为高度动画内容提供简化版本。它也是一个可以在一处设置并影响用户遇到的各种内容的设置。这使得它成为我们用于检测和响应用户对减少运动的需求的绝佳工具。

我曾在 Smashing Magazine 上详细介绍过如何使用prefers-reduced-motion，并且该网站上的其他文章也对此进行了介绍。简而言之，它允许我们通过媒体查询访问用户的操作系统级别的运动偏好。我们可以在 CSS 或 JavaScript 中访问它，并使用返回值为希望减少运动的用户提供减少运动的体验。例如，我们可以这样做来创建弹跳 CSS 动画的减少运动版本：

/* A constant bouncing motion effect applied to the title */
h2 {
  animation: bouncing 1.5s linear infinite alternate;
}

/* Replace it with a safer effect when prefers-reduced-motion returns true */
@media (prefers-reduced-motion: reduce) {
  h2 {
    animation: fade 0.5s ease-in both;
  }
}

某些网站选择同时使用自定义切换按钮和减少运动偏好。如果您在操作系统设置中请求减少运动，则会自动获得减少运动模式。对于运动量大的网站，这种双管齐下的方法是一种很好的策略。Marcy Sutton 在她的 egghead.io 课程中以及此 CodePen 演示中介绍了如何设置此方法的基本知识。

在您的下一个动画项目中使用这些指南

就是这样，WCAG 关于动画的所有内容都在一处进行了说明。我希望本文能帮助您自信地使您的网页动画作品更具可访问性。有时需要付出一些额外的努力，但当这意味着您扩大了可以有意义地与您的网站互动的人数时，这些额外的努力是完全值得的。

本文重点介绍了特定于动画的建议，但动画并不是我们工作中可访问性考虑因素能够产生重大影响的唯一地方。有一些关于可访问性的优秀资源涵盖了更全面的可访问性观点。我最喜欢的一本是 Laura Kalbag 编写的《人人皆享的可访问性》一书。像WebAIM和A11y 项目这样的网站是查找大量资源的好去处。如果您使用 SVG 进行大量动画工作，Heather 的 SVG 可访问性文章也是一个很好的资源。如果您还没有查看过这些资源，我强烈建议您查看一下。