重新审视 prefers-reduced-motion，简化运动媒体查询

两年前，我写了关于 prefers-reduced-motion 的文章，这是一个在 Safari 10.1 中引入的媒体查询，帮助患有 前庭 和癫痫疾病的人使用网络。这篇文章提供了一些关于媒体查询的背景信息，为什么需要它，以及如何使用它来避免创建可能触发残疾的视觉效果。

这篇文章借鉴了其他人的出色工作，包括 Orde Saunders 关于 用户查询 的文章，以及 Val Head 关于 网页动画运动敏感性 的文章。

现在是 2019 年的第四个月，我很高兴地报告说，我们所有的主要桌面浏览器都支持此功能！Safari 是第一个支持的浏览器，Firefox紧随其后。Chrome 稍后加入了这一行列，从版本 74 开始支持此功能。

虽然 Microsoft Edge 不支持 prefers-reduced-motion，但它将 很快成为 Chrome。如果说这件事有什么好的一面，那就是 Edge 其他出色的无障碍功能 将（希望）有机会被移植回 Chrome。

意识

虽然我很高兴看到一些网站和网络应用程序使用媒体查询，但我发现，除了那些活跃于 CSS 和无障碍空间的人维护的地方之外，很少遇到它。从某种程度上来说，这是有道理的。虽然 prefers-reduced-motion 比较新，但 CSS 功能整体上往往 被忽视和低估。 无障碍功能更是如此。

不能责怪人们不使用他们不知道的功能，尤其是比较新的功能，尤其是在我们这个快节奏的行业。在行业优先考虑什么作为可销售的东西方面，也存在着偏见，因此开发者会关注什么。然而，prefers-reduced-motion 是一种与库无关的功能，它与操作系统级别的功能相关联。我敢肯定，这意味着它在技能获取所花费时间方面的回报方面，将具有一定的持久力。

说到回报，我认为也值得指出 prefers-reduced-motion 所代表的真正价值：不是吸引 LinkedIn 上渴望流行语的招聘人员，而是改善受益于它所创造的效果的人的生活质量。使用这个媒体查询可以使人们免于为了仅仅出于好奇点击链接或滚动页面而不得不忍受大量不必要的痛苦。

受影响的人群

在残疾方面，许多人只是假设“盲人”。现实情况是，残疾是一个复杂而微妙的话题，它出奇地普遍，非常个人化，并且充满了 不幸的误解。它也是高度可变的。不同的人受到不同残疾条件的影响方式不同，这延伸到各种永久性、暂时性、环境性和情境性问题。多种叠加的条件会（并且确实会）影响个人，有时对一个人有帮助的东西可能对另一个人有害。这是一个困难但非常重要的需要牢记的事情。

如果你患有前庭疾病或某些类型的偏头痛或癫痫触发因素，在网络上导航就像走在雷区一样——你永远只有一次点击就会触发一个未经宣布的动画。而这仅仅是对于随意浏览而言。

如果你使用网络来工作，你可能别无选择，只能忍受一个包含触发动画的网络应用程序，每周多次，甚至每天或每小时。除了没有自主权修改你的工作设备之外，你可能也没有快速轻松地换工作的选择——当你是一个 专门的知识工作者 时，这种特权很容易被遗忘。

假设一个人知道自己的前庭疾病或是什么触发了它，这是一个谬误。事实上，有时最初的触发体验会加剧你的敏感性，并使设计的其他部分难以使用。 Facundo Corradini 在他的文章中分享了他对这种现象的经历，“前庭疾病的无障碍性：我的暂时性残疾如何改变了我的观点”。

并非所有辅助技术使用者都是高级用户，因此假设患有前庭疾病的人知道或有 访问权限 来启用减少运动的操作系统设置或 安装浏览器扩展，也是一个谬误。

想想一个在大型企业工作的人，他们必须使用功能受限的预配计算机。或者一个不完全了解自己的平板电脑除了浏览社交媒体、观看视频和与家人和朋友聊天之外还能做什么的人。或者一个廉价和/或非正规的设备，它永远不会支持 prefers-reduced-motion 功能——有些人会购买像 Windows Phone 这样的停产设备，因为它们的折旧使它们变得负担得起。

这些人是否应该因为他们的境况而受到伤害？当然不。

考虑什么是有害的

你可以将伤害与价值联系起来，就像你对喜悦所做的那样。旨在促使人们注册的动画也可能将他们赶走。这种退出指标更 难以量化，但它确实会发生。有时 伤害甚至是有意的，因此更容易捕获数据点——你 如何处理这些信息 是一个完全不同的问题。

如果对足够多的人造成了足够多的伤害，它会影响我们所知的某种品牌。这种影响甚至不需要与残疾条件相关联。太多的动画，应用到错误的东西上，以错误的方式，会让人们远离，即使他们无法准确地表达出 *为什么*。

你也不知道谁可能是接收方，或者他们在加载你的网站或网络应用程序时经历了什么情况。我们不能—— 也不应该——知道这种信息。这可能是一个潜在的客户，一个负责评估你创业公司的风险投资公司员工，或者可能是你的新老板。

我们也不需要限定他们与我们之间的关系来判断他们的情况是否值得考虑——**主动友善难道不够吗？**

动画是渐进增强

我们还需要认识到，并非所有能够访问网络的设备也能够渲染动画，或者流畅地渲染动画。当动画在低功耗或低质量设备上使用时，即使该设备“技术上”支持它，整体用户体验也会下降。有些人甚至 故意寻求这种体验 作为一项功能。

设备也可能设置为专门的浏览模式，让人们以其他方式访问你的内容。这个概念被称为 健壮性，它是 四个高级原则 之一，这些原则指导着 有关如何打造无障碍体验的指南。

动画在这些模式下可能并不总是像你预期的那样显示。一个例子是，当视窗被放大时，动画不是使用 相对单位 构建的。有相当大的可能性，重要的部分可能会被推到视窗之外，使动画看起来像是一堆随机闪烁的比特。另一种专门浏览模式的例子可能是 阅读模式，在这种模式下，动画可能根本不会出现。

将代码付诸实践

考虑到所有这些，我想知道是否有一些机会可以帮助 Web 专业人士更加了解，从而更加谨慎地对待设计和实施不当的动画的弊端。

也许我们可以主动在级联中较高的位置包含一个媒体查询，以便为那些需要禁用所有动画的人，以及那些设备无法支持动画的人禁用所有动画。这可以通过针对任何有人表示希望获得低动画或无动画体验，或任何屏幕刷新率较慢的设备来实现。

查询的第一部分，针对低动画或无动画，是通过 prefers-reduced-motion 实现的。第二部分，针对屏幕刷新率低的屏幕，使用 update。update 是一个新的 媒体功能，它允许我们 “查询输出设备在内容呈现后修改内容外观的能力。”

@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; /* Hat tip Nick/cssremedy (https://css-tricks.org.cn/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
    transition-duration: 0.001ms !important;
  }
}

此代码强制所有使用 animation-duration 或 transition-duration 声明的动画以人眼无法感知的速度结束。当用户请求减少运动体验，或设备的屏幕刷新率较慢（例如电子墨水屏或廉价智能手机）时，它将起作用。

保留动画和过渡持续时间还可以确保任何与 基于 CSS 的动画 绑定的功能都能成功激活（与使用 animation: none 声明不同），同时还能防止触发残疾条件或造成渲染滞后。

此声明的目的是在我们的 重置样式 中引入一些有意的摩擦。当然，这不是一个完美的解决方案，但它确实解决了一些问题。

1. 通过在每个检查元素的级联中使它们出现，增加开发人员意识到这两个媒体功能的机会。
2. 提供时间来考虑为什么要在网站或 Web 应用中引入动画，以及对于那些不能或不想体验动画的人来说体验应该是什么样的。
3. 鼓励不太熟悉 CSS 的开发人员从组件的角度思考级联，并鼓励他们创建更易于维护的样式表。

动画并非多余

除了前庭疾病和光敏性疾病之外，我们还必须考虑另一个重要的可访问性方面：认知障碍。

认知障碍

作为一项关注点，该类别范围广泛，通常难以量化，但与 任何其他可访问性学科 一样重要。它也更为普遍。为了进一步说明这一点，世界卫生组织报告 估计全球有 3 亿人受到抑郁症的影响，这是一种暂时性或永久性、环境性和/或生物性疾病，会导致您与环境互动的能力显著下降。这包括干扰您理解周围世界的能力。

动画可以通过将其用于分解复杂的概念或传达看似相互分离的对象之间的关系，成为帮助对抗某些形式的认知障碍的绝佳工具。 Val Head 在 A List Apart 上发表的文章 强调了一些其他 经过充分研究的益处，包括帮助提高解决问题的能力、回忆能力和技能习得，以及减少 认知负荷 和对 变化盲视 的敏感性。

减少并不一定等于移除

在使用动画时，我们可能不需要把孩子和洗澡水一起倒掉。请记住，它是 prefers-reduced-motion，而不是 prefers-no-motion。

如果我们拥抱级联，我们可以在每个组件的基础上使用前面描述的动画重置代码。如果组件的含义因完全删除动画而减弱，我们可以减慢并简化组件的动画，使其达到概念可以传达而不会成为潜在的可访问性触发器的地步。

如果您感觉很聪明，您甚至可以使用 CSS 自定义属性 以高效的方式实现这一点。如果您感觉非常聪明，您还可以将这些自定义属性用于网站范围内的动画首选项小部件。

在下面的代码示例中，我们为动画和过渡持续时间定义了默认属性，然后根据它们声明的上下文对其进行修改。

/* Set default durations */
:root {
  --animation-duration: 250ms; 
  --transition-duration: 250ms; 
}

/* Contextually shorten duration length */
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  :root {
    --animation-duration: 0.001ms !important; 
    --transition-duration: 0.001ms !important;
  }
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  /* Remove duration for all unknown animation when a user requests a reduced animation experience */
  * {
    animation-duration: var(--animation-duration);
    animation-iteration-count: 1 !important;
    transition-duration: var(--animation-duration);
  }
}

/* Update the duration when animation is critical to understanding and the device can support it */
@media screen and (prefers-reduced-motion: reduce), (update: fast) {
  .c-educational-concept {
    /* Set a new animation duration scoped to this component */
    --animation-duration: 6000ms !important; 
    ...
    animation-name: educational-concept;
    /* Use the scoped animation duration */
    animation-duration: var(--animation-duration); 
  }
}

但是，尝试测试这种减速动画的有效性会让我们陷入困境：我们没有一个真正的魔力数字可以写一个测试来检验。

我们需要有广泛的代表性人群，这些人容易受到基于动画的残疾触发器的影响，以便让他们签署协议，确认它是安全的，而这不幸地涉及让他们接触到一些可能并不安全的东西。这是一个巨大的要求。

一个更好的方法是询问他们过去哪些类型的动画对他们造成了触发，然后看看他们描述的内容是否与我们制作的内容相匹配。这种方法也把责任放在你自己身上，而不是有残疾的人身上，来 做提供住宿的工作。

如果您在寻找人方面遇到困难，请询问您的朋友、家人和同事——我相信那里的人比您想象的要多。如果您需要创建更安全动画的良好起点，我再次敦促您 阅读 Val 在 A List Apart 上发表的文章。

神经多样性

这里有很多内容需要解开，而我并不是最适合谈论这件事的人。以下是我的朋友 Shell Little（富国银行 DS4B 的可访问性专家）对此的看法。