1. Web
  2. 无障碍
  3. 指南
  4. 预防癫痫发作和身体反应

网页癫痫发作和身体反应的无障碍性

本文介绍了为前庭功能障碍者提供无障碍网页内容背后的概念，以及如何测量和防止内容导致癫痫发作和/或其他身体反应。

概述

癫痫发作

由光引起的癫痫发作被称为光敏性癫痫。闪烁、闪动或忽明忽暗的内容可能会诱发光敏性癫痫。使用视频、动画 GIF、动画 PNG、动画 SVG、Canvas 以及 CSS 或 JavaScript 动画的 Web 技术都可能产生诱发癫痫发作或其他致残性身体反应的内容。某些视觉模式，尤其是条纹，即使不是动画，也可能引起身体反应。光敏性癫痫实际上是一种“反射性癫痫”——癫痫发作是对一种触发因素的反应。就光敏性癫痫而言，癫痫发作是由闪烁的灯光特别触发的，但其他类型的反射性癫痫可能是由阅读行为或噪音触发的。图案和图像也可能触发癫痫。

静态图像可能导致癫痫发作和其他障碍的事实在 《伽马振荡和光敏性癫痫》 等文章中有所记载，其中指出：“某些视觉图像，即使在没有运动或闪烁的情况下，也可能触发光敏性癫痫患者的癫痫发作”。癫痫基金会在其文章 《揭示光敏性——癫痫最复杂的病症之一》 中谈到了静态图像和图案：“可辨别的明暗条纹的静态或移动图案与闪烁的灯光具有相同的效果，因为明暗区域的交替。” 美国癫痫基金会工作组能够对这个问题进行一些“量化”：“具有诱发癫痫发作潜力的图案包含清晰可辨的条纹，在任何方向上都有超过五对明暗条纹”。此外，根据 Cedars-Sinai 的说法，棋盘格图案也已知会导致光敏性癫痫发作。

虽然静态图像可能作为触发因素，但它们的一致性较低。已经确立且强烈的触发因素是闪烁/频闪灯。USF 综合癫痫项目的 Selim Benbadis 博士指出，“唯一真正有记载的是闪烁的灯光，它可以触发光敏性癫痫患者的癫痫发作。但只有少数类型的癫痫是光敏性的，绝大多数癫痫不是。” 除了由光敏性引起的癫痫发作外，听某些音乐也可能触发所谓的音乐性癫痫，尽管这类癫痫似乎要罕见得多。要了解关于音乐性癫痫主题的精彩介绍，请访问安大略癫痫组织的 音乐性癫痫 网页。

癫痫发作和癫痫病不是一回事。在其文章 《癫痫病的修订定义》 中，癫痫基金会指出：“癫痫发作是一次事件，而癫痫病是涉及反复无故发作的疾病。”根据癫痫基金会的页面 《癫痫发作有多严重？》，“癫痫意外猝死 (SUDEP) 可能是癫痫患者最常见的与疾病相关的死亡原因。它不常见，但它是一个非常现实的问题，人们需要意识到其风险”。

重点是，癫痫发作绝对可能是致命的，而开发者和设计师对于使网络成为对光敏性或音乐性触发因素敏感者更安全的地方至关重要。

癫痫发作可能是致命的，但即使是那些“仅仅”使人衰弱的发作，其严重程度也可能使用户失去能力。其他障碍，如定向障碍、恶心、呕吐等，也可能严重到使用户无法正常工作。癫痫基金会的文章 《光敏性与癫痫发作》 提供了一个可能导致光敏人群癫痫发作的触发因素列表；以下是该列表的摘录

  • 电视屏幕或电脑显示器，由于闪烁或滚动图像。
  • 某些视频游戏或电视广播，包含快速闪光或不同颜色的交替模式。
  • 强烈的频闪灯，如视觉火警警报。
  • 自然光，如阳光，特别是当它在水面闪烁、透过树木或百叶窗的板条闪烁时。
  • 某些视觉图案，特别是对比色的条纹。

同一篇文章继续指出，许多因素必须结合才能触发光敏反应。值得注意的是，它将光的波长作为一个可能的因素；光谱中红色部分的波长似乎特别有问题。在文章 《理解 WCAG 2.0：每秒三次闪烁或低于阈值》 中，通常指出：“患有光敏性癫痫症的个人可能会因内容以特定频率闪烁超过几次而被触发癫痫发作”，并特别指出：“人们对红色闪烁比对其他颜色更敏感，因此为饱和红色闪烁提供了专门的测试”。

你甚至不需要图像或视频来造成伤害。一个设置为以高频率改变颜色和亮度的 <div> 元素，通过 JavaScript 很容易实现，就可能造成真正的伤害。而且，闪烁无处不在。例如，通常用于在页面加载时显示的“加载指示器”，在旋转时很容易“闪烁”。

对于有运动技能问题的个人存在额外的担忧。例如，Trace Research & Development Center 的 光敏性癫痫分析工具 的页面指出，“光敏性癫痫发作可由网页或计算机内容中的某些类型的闪烁引起，包括导致屏幕大面积反复快速闪烁的鼠标悬停”。

其他身体反应

恶心、眩晕（或头晕）和定向障碍是非常不特定的症状，与各种疾病有关，并不特别暗示癫痫发作（除了定向障碍，这在癫痫发作中可以看到）。然而，癫痫发作并不是闪烁、忽明忽暗、闪动和其他类似刺激可能产生的唯一不良身体反应。1997 年，一部日本卡通片中出现了一个动画“病毒炸弹”。一些观看该卡通片的儿童反应为癫痫发作，另一些则出现恶心、颤抖和吐血。孩子们的反应非常严重，他们不得不被紧急送往急诊室。下面列出的身体障碍都是可能产生的后果：这些身体反应中的每一种都可能严重到使人丧失能力。

  • 癫痫发作
  • 前庭障碍
  • 偏头痛
  • 恶心
  • 呕吐

闪烁、闪动和忽明忽暗

尽管“flashing”（闪光）和“blinking”（闪动）有时可以互换使用，但它们并不相同。根据 W3C 的说法，闪动是一个分散注意力的问题，而闪光指的是每秒发生超过 3 次，并且足够大和亮的内容。Section 508 禁止频率大于 3 赫兹（每秒闪烁次数）且低于 55 赫兹的闪烁效果。癫痫基金会的文章 《揭示光敏性，癫痫最复杂的病症之一》 指出，“通常，频率在每秒 5 到 30 次闪烁（赫兹）之间的闪光最有可能引发癫痫发作。为了安全起见，共识建议光敏个体不应暴露于每秒超过三次的闪光。” 然而，对于某些人来说，闪光/闪动在低于 3 赫兹时也可能引起症状。

值得注意的是，并非所有的闪光和闪动都是不好的。美国宇航局（NASA）在其题为 《闪动、闪光和时间响应》 的文件中指出，闪动和闪光可以成为吸引注意力的强大工具——这对于警示按钮是必要的（这假设用户在元素闪烁时仍能看到屏幕，但并非总是如此）。对于某些用户来说，闪动的按钮也警告他们必须谨慎和有节制地使用。就网页设计而言，通过“劫持”屏幕以提供闪烁的紧急警告来提醒公司员工危险的系统，需要考虑屏幕上这些警告闪烁时的速率、大小和亮度变化。

闪光和闪烁——如何量化危险？

根据文章 《光和图案诱发的癫痫发作：美国癫痫基金会工作组的专家共识》，“如果闪光的亮度 ≥20 cd/m2，频率 ≥3 Hz，并占据 ≥0.006 球面度的立体视角（在典型观看距离下约占中央视野的 10% 或屏幕面积的 25%），则闪光是潜在的危险。”

典型的观看距离是多远？撰写本文时考虑的典型观看距离建议是“该区域可以视为适用于电视屏幕面积的 >25% 的区域，假设标准观看距离为 ≥2 米（约 9 英尺）”。自那时以来，情况发生了很大变化，我们现在离屏幕更近了。

某些颜色和/或颜色组合也很重要。《研究人员发现，某些颜色更容易引起癫痫发作》 指出，“……大脑动力学的复杂性可能更多地受到某些颜色组合的调节，例如，红蓝闪烁刺激比红绿或蓝绿刺激引起更大的皮层兴奋。”

闪光与红色闪光

WCAG 2.3.1 通用闪光和红色闪光阈值 定义如下：

  • 通用闪光被定义为一对相对亮度变化达到或超过最大相对亮度 10% 的相反变化，其中较暗图像的相对亮度低于 0.80，并且“一对相反变化”是指先增加后减少，或先减少后增加；
  • 红色闪光被定义为任何涉及饱和红色的相反转变对。

这些标准基于早期的研究。2004 年，美国癫痫基金会召开了一次研讨会，就光敏性癫痫达成了 共识，指出“如果闪光的亮度至少为 20 cd/m2，频率至少为 3 Hz，并且占据的立体视角至少为 0.006 球面度（在典型观看距离下，约占中央视野的 10% 或屏幕面积的 25%），则闪光是潜在的危险。” 向饱和红色的转变或从饱和红色的转变本身也很重要并构成风险：“无论亮度如何，向饱和红色的转变或从饱和红色的转变也被认为是一种风险。”

尺寸和距离

多大？视情况而定

“相对”大小和距离都很重要。根据 PEAT 的说法，“当内容以 1024 x 768 像素观看时，同时发生的闪光的总面积不得超过显示屏幕区域上任何 341 x 256 像素矩形的四分之一。”

视野是一个重要考虑因素的观点在讨论 WCAG 2.3.1 的文章中继续出现：“1024 x 768 屏幕被用作评估的参考屏幕分辨率。341 x 256 像素块代表在典型观看距离下的 10 度视口。（10 度视野取自原始规范，代表人眼中央视觉部分，人们最容易受到光刺激。）”

这个像素面积比计算的是相对大小，但距离也很重要。

距离之所以重要，是因为它影响总视野。当观看者佩戴眼罩进行游戏时，视野很可能完全被屏幕包围。WebXR 是一项开放规范，使得在浏览器中体验 VR 成为可能，可以在手机、电脑或头戴设备上体验。在眼罩中闪烁图像的担忧日益增加，因为眼罩离眼睛非常近。

研究普遍表明，由于刷新率较高，VR 的使用实际上可能比正常的屏幕消费更安全。正如 Fisher 等人 2022 年 的总结，“目前有限的数据并未引发对 VR 技术的特殊癫痫担忧，尽管随着经验的增加，这种看法可能会改变。某些类型的 VR 内容，包括明亮的闪光、刺激性的图案或颜色变化，预计会像在现实世界中一样诱发癫痫发作。”

（请注意，一些用户可能无法看清闪烁的光标，并可能出现偏头痛、晕动病和定向障碍，尽管闪烁的光标占据屏幕的面积要小得多。）

图案和视差

对比强烈的明暗几何图案是已知的罪魁祸首；条纹和棋盘格是最著名的例子。美国癫痫基金会工作组列出了可能诱发癫痫发作的明暗条纹对的数量以及在何种条件下。如果图案是不变且笔直的，则最多允许八条线，但如果它波动，则不超过五条线。

视差效应可能导致定向障碍。请谨慎使用视差效应；如果必须使用，请确保用户有控件可以关闭它们。

“具有诱发癫痫发作潜力的图案包含清晰可辨的条纹，在任何方向上数量超过五对明暗条纹。当任何图案的明暗条纹从最小预期观看距离在眼睛处共同形成 >0.006 球面度的立体角时，最亮条纹的亮度 >50 cd/m2，并且图案呈现 ≥0.5 秒，则如果条纹改变方向、振荡、闪烁或对比度反转，图案应显示不超过五对明暗条纹；如果图案不变或在一个方向上平滑漂移，则不超过八条条纹。”

并非所有情况都已知，即使有上述指标，还有其他因素在起作用。例如，从较小区域变为较大区域会增加大脑反应的可能性，同时增加对比度，以及将空间频率从低增加到中。同样已知的是，尽管其背后的原因尚不清楚，但从基本方向（例如，条纹）变为多个方向（例如，将一组条纹叠放在原始条纹之上但与之垂直时出现的棋盘格图案）会影响大脑。

颜色

理解颜色对于无障碍性很重要。请参阅理解颜色和亮度，因为它关系到网页无障碍性和一般无障碍性。

颜色如何与其背景相关——通常以对比度的形式来描述——以及颜色在动画中帧与帧之间变化有多剧烈，这都很重要。有关此方面的更多信息，请参阅每秒三次闪烁或低于阈值理解 SC 2.3.1。

红色的特殊情况

已经证明，某些颜色比其他颜色更容易引起癫痫发作。人类的生理和心理通常会受到红色的影响。它影响行为的力量甚至在动物中也已得到注意。

  • 红色脱饱和测试：人眼对红色的敏感度如此之高，以至于眼科医生用它来设置测试。红色脱饱和测试评估视神经的完整性。有关眼科医生如何使用此测试的更多信息，请参阅红色脱饱和。
  • 红色环境：研究表明，对于患有创伤性脑损伤的人来说，在红色环境中认知功能会降低。

饱和红色是一种特殊的、危险的情况，并且有专门的测试。除了红色环境会影响创伤性脑损伤患者的认知功能外，红色光谱波长中的颜色似乎也需要特别关注和特殊测试。Gregg Vanderheiden 博士在测试光敏性癫痫分析工具时指出，癫痫发作率远高于预期。他们发现我们对饱和红色闪烁更为敏感。（请参阅视频《光敏性癫痫分析工具》。）

网络安全色不等于癫痫安全色

请注意，颜色 #990000 被认为是“网络安全色”。这并不意味着它对于“不引起癫痫发作是安全的”，它只意味着该颜色可以被用于在屏幕上生成颜色的技术“安全地”准确再现。

通过测量预防伤害

衡量潜在危害是一个很好的起点。测试中考虑的因素包括颜色、亮度、大小、对比度，以及在动画的情况下，频率。WCAG 2.1 提供了评估内容的指导。

2004 年 8 月，美国癫痫基金会召开了一次研讨会，开始就光敏性癫痫达成专家共识。以下专家和权威信息来自：光和图案诱发的癫痫发作：美国癫痫基金会工作组的专家共识。

如果闪光的亮度 ≥20 cd/m2，频率 ≥3 Hz，并占据 ≥0.006 球面度的立体视角（在典型观看距离下约占中央视野的 10% 或屏幕面积的 25%），则闪光是潜在的危险。向饱和红色的转换或从饱和红色的转换也被认为是一种风险。具有诱发癫痫发作潜力的图案包含清晰可辨的条纹，在任何方向上都有超过五对明暗条纹。当任何图案的明暗条纹在最小预期观看距离下共同在眼睛处形成 >0.006 球面度的立体角时，最亮条纹的亮度 >50 cd/m2，并且图案呈现 ≥0.5 秒，那么如果条纹改变方向、振荡、闪烁或对比度反转，图案应显示不超过五对明暗条纹；如果图案不变或在一个方向上平滑漂移，则不超过八条条纹。这些原则在固定媒体（例如，可以逐帧分析的预录电视节目）的情况下比在交互式媒体中更容易应用。

“cd/m2” 指的是坎德拉每平方米。那么对于网页开发者来说，这与颜色、亮度和饱和度的测量有何关系？

坎德拉是 SI 单位（国际单位制）中的光强度单位。它是一个光度学术语，而光度学涉及人眼所感知的可见光的测量。维基百科关于“坎德拉每平方米”的文章以我们作为开发者所熟悉的方式来描述它：在显示设备上，以及在 RGB 空间中。这很有帮助，因为有一个特定的标准被假定用于显示器、打印机和互联网，那就是 sRGB（标准红绿蓝）。

作为每单位面积发出的光的度量，这个单位经常被用来指定显示设备的亮度。显示器的 sRGB 规范目标是 80 cd/m2。通常，校准过的显示器应该有 120 cd/m2 的亮度。大多数消费级桌面液晶显示器的亮度在 200 到 300 cd/m2 之间。高清电视的亮度范围从 450 到大约 1500 cd/m2。

关键在于，sRGB 色彩空间是研究、评估工具和开发者之间的共同接触点，因为它很容易从常用的十六进制代码转换而来。

生理和心理因素的考虑

许多专家致力于尽可能量化和测量可能作为癫痫发作触发因素的网页内容。然而，不能忘记的是，颜色既是人脑中的感知，也是对来自电脑屏幕的光的测量。

除了心理差异外，我们之间也存在生理差异。一个真实的人如何感知和响应颜色和光，会有各种差异和细微之处。例如，加州州立大学长滩分校计算机科学荣休讲师 Tom Jewett 指出，关于 HSL 色彩尺度中的亮度，“……亮度级别之间的区别实际上并非像 HSL 尺度所暗示的那样是线性的；我们对较亮值的变化比对较暗值的变化要敏感得多。”

重要的是要理解，光及其测量是线性的，但人类视觉和人类感知不是。关于如何将机器对光的测量（从电脑屏幕发出，经过一定距离到达人眼，被人眼视觉过滤，然后通过人脑处理）关联起来，正在进行调查和讨论。

甚至年龄和性别也可能起作用。根据癫痫基金会的文章 《揭示光敏性，癫痫最复杂的病症之一》，“儿童和青少年比成年人更容易对光刺激产生异常反应，第一次由光引起的癫痫发作几乎总是在 20 岁之前发生”。 该文章接着提供了这个统计数据：“女孩（60%）比男孩（40%）更容易受到影响，尽管男孩的癫痫发作更频繁，因为他们更可能玩视频游戏。视频游戏通常包含潜在的刺激性光刺激”。

用户测试非常成问题。自然地，没有人愿意让一个容易癫痫发作的个体进行用户测试。这很危险。因此，开发者和设计师能做的最道德的事情之一，就是使用由该领域专家与医生携手开发的工具。在撰写本文时，有两种常用的工具是由研究人员和医生为电影/视频而道德和专业地开发的：PEAT 和 Harding 测试。

光敏性癫痫分析工具 (PEAT)

Trace 研究与开发中心为光敏性癫痫分析工具树立了黄金标准，并且他们特意使其可以免费下载。PEAT 可以帮助作者确定其内容中的动画或视频是否可能引起癫痫发作。请注意其使用限制：禁止使用 PEAT 评估用于电视广播、电影、家庭娱乐或游戏行业的商业制作材料。请使用 Harding 测试或其他工具用于商业目的。

要获取马里兰大学光敏性癫痫分析工具的免费副本，请访问 Trace 研究与开发中心。

University of Maryland College of Information Studies Photosensitive Epilepsy Analysis Tool.

哈丁测试

由于 PEAT 工具禁止商业使用，电视节目制作人可以在 HardingTest.com 使用哈丁测试。哈丁测试是另一个黄金标准。各国的电视节目制作人必须通过此测试才能进行广播，因此 HardingTest.com 的团队提供视频内容的分析和认证。

Harding Flash and Pattern Analyzer.

面向开发者的无障碍解决方案

所有动画都具有潜在危险。作为设计师和开发者，我们的责任是确保我们不会有意或无意地造成伤害。如果我们必须包含可能造成伤害的内容，至关重要的是要防止用户意外遇到有害内容，并提供方法让用户预防和控制动画，以减轻潜在伤害。

网页开发者可以做什么

勿施伤害

WCAG 指南 2.3 癫痫发作和身体反应 提供了概述：“不要以已知会导致癫痫发作或身体反应的方式设计内容”。不要包含用户无法控制的动画。不要使用已知会引起问题的图案进行设计。如果必须包含带有闪烁的 gif 或 png，请将其录制成视频格式，以便用户可以使用控件。让用户能够避免、关闭或使其危害性降低。

理解恶意行为

作为开发者或设计师，问问自己，闪烁的内容是否真的需要出现在你的网页上。即使处理得当，也有人可能会从你的网站下载有问题的内容并将其武器化。据信，首次有记载的试图利用计算机通过动画造成身体伤害的事件始于 2008 年 3 月 22 日星期六：癫痫基金会的网站被黑客攻击，发布了带有闪烁图像和虚假声称有帮助的链接的帖子。正在该网站寻求帮助的前庭障碍用户受到了影响。

在记者 Kurt Eichenwald（一位已知的癫痫患者）于 2016 年 12 月收到一个动画 gif 后，引发了一系列法律考量，该 gif 带有信息：“你的帖子让你活该发作一次癫痫”。

控制曝光，控制访问

控制对页面的暴露是确保易患癫痫的人不会意外接触到它的关键。WCAG 指出，单个对象就可能使整个页面无法使用。

如果你认为你可能有一个可能导致癫痫发作的图像或动画，请通过首先显示关于该内容的警告来控制对它的访问，然后将其放在一个用户必须选择加入的位置，例如点击一个按钮，或者确保页面的链接有明确而明显的警告。

考虑为搜索引擎设置爬取指令，以提示它们不应将可能有害的资源包含在其搜索索引中。你可以通过在 <meta name="robots"> 元素中使用限制性规则（如 noindex, nofollow）来实现这一点。通过不索引页面（noindex）和不跟踪页面上的链接（nofollow），用户通过搜索偶然发现它的可能性将降低。

html
<html lang="en">
  <head>
    <title>…</title>
    <meta name="robots" content="noindex, nofollow" />
  </head>
</html>

对于非 HTML 资源，你可以在 X-Robots-Tag HTTP 响应头中设置爬取指令。

http
X-Robots-Tag: noindex

动画 GIF

所有图像类型都具有潜在危险，然而，动画 GIF 因其普遍存在以及动画速度实际上由 GIF 文件本身控制而值得特别提及。

检测 GIF 是否为动画

对于动画 GIF，确保动画在用户选择激活之前处于非活动状态。例如，用户必须按下按钮或选中复选框才能启动动画。

视频

与动画 GIF 的情况一样，用户必须按下按钮或选中复选框才能启动动画。有很多方法可以做到这一点，比如不要在 <video controls> 中添加 autoplay 属性，或者将 animation-play-state 的初始状态设置为 paused。要看一个这方面如何实际运作的强大示例，请参阅 Kirupa 的文章 《打开和关闭动画》。Kirupa 将 animation-play-state 与 transition、transform 和 prefers-reduced-motion 结合使用，创造了一个由用户控制的非常无障碍的体验。

animation-play-state 是一个 CSS 属性，用于设置动画是正在运行还是暂停。

css
div {
  animation-play-state: paused;
}

CSS 过渡可用于将动画初始阶段的持续时间设置为零。

css
div {
  transition-duration: 0s;
}

确保用户既能启动动画，也能停止动画

一个没有任何属性的 <video> 元素不会自动播放，也没有控件。请确保将 controls 属性添加到 video 元素，以便用户既能启动视频，也能停止视频。

html
<video controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

以编程方式确保控件可用

HTMLMediaElement.controls 属性反映了 controls HTML 属性，它控制是否显示用于播放媒体项目的用户界面控件。

视频

为确保视频具有用户可以访问的控件，请务必在 HTML 视频和音频元素中添加“controls”一词。

<video controls>

html
<video controls>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4">link to the video</a> instead.
  </p>
</video>
音频

将同样的例子应用于音频

<audio controls>

html
<audio controls>
  <source src="myAudio.ogg" type="audio/ogg" />
  <source src="myAudio.mp3" type="audio/mpeg" />
  <p>
    Your browser does not support the audio element. Here is a
    <a href="myAudio.mp3">link to the audio</a> instead.
  </p>
</audio>
作为视频一部分的音频

请注意，视频中的音频可以通过 muted 内容属性来控制，即使内容是在 <video> 元素内，而不是 <audio> 元素内。这个例子来自 HTML Living Standard 中关于 muted 媒体属性 的描述部分。它解释了视频将在后台静音自动播放，直到用户采取行动取消静音。

html
<video src="adverts.cgi?kind=video" controls autoplay loop muted></video>

控制速度

这似乎是显而易见的，但由于 MIME 类型如此之多，处理它们的机制差异很大，因此没有一个一刀切的解决方案。更复杂的是，即使是文件的分类方式也使如何处理它们变得复杂。例如，.gif 文件格式通常被理解为图像，但由于其动画能力，在某些圈子中也被视为视频文件格式。要获取媒体类型的全面列表，请访问 IANA.org 的媒体类型页面。

嗅探它们的方法并非易事。你可能会对 whatwg.org 上的 MIME 嗅探标准感兴趣。几乎每种图像都可以被动画化；它们的动画方式各不相同，因此，动画的控制方式也不同。

常见的动画文件类型

  • 位图：动画
  • Canvas：MDN 的 Canvas 教程有一个关于基本动画的精彩部分。setInterval() 是 Canvas 动画中的中流砥柱，但看它如何与屏幕刷新交互也很有趣。请参阅文章《用 requestAnimationFrame 控制 fps？》，其中他们讨论了在屏幕刷新的背景下实现 requestAnimationFrame 的细节。
  • GIF（光栅）：难以破解，因为它们的动画控制权在于 gif 文件本身。有关控制 GIF 速度的信息，请参阅 W3C 的 “G152：设置动画 gif 图像在 n 个周期后（5 秒内）停止闪烁”。Stack Overflow 上一篇关于该主题的精彩文章是 “你能用 JavaScript 控制 GIF 动画吗？”
  • GIFV（光栅）：被认为是 GIF 的一种变体，即视频版本。该格式没有标准化，必须引用一个“真实”的视频文件（例如，一个 .webm 文件），该文件必须存在于别处。
  • JPG (光栅)
  • MNG (光栅): 多图像网络图形是一种用于动画图像的图形文件格式。也被一些人认为是视频格式。
  • PNG、APNG（光栅）：便携式网络图形和动画便携式网络图形都可以是动画的。
  • SVG（矢量）：MDN 文档 《SVG：可缩放矢量图形》 指出，“SVG 是一种基于文本的开放 Web 标准。它被明确设计为与其他 Web 标准（如 CSS、DOM 和 SMIL）协同工作。” SVG 可以像本例中那样用作图像：<img src="example.svg" alt="这是一个使用 svg 作为源的图像">。这意味着 SVG 的外观和动画可以通过 CSS 关键帧和动画来控制。关于与 JavaScript 的交互，请参阅 MDN 关于 SVG 接口和将 SVG 效果应用于 HTML 内容的文档。
  • Voxel（光栅）：三维体素光栅图形被用于视频游戏以及医学成像。

文本也可以是动画的

平移和变换可以使 div 中的文本动起来，并造成伤害。移动的文本会因为与移动图像相同的原因诱发癫痫发作，所以请避免让你的文本动起来。无论如何，最好避免使用移动文本，因为许多屏幕阅读器无法读取移动文本，即使对于没有视觉或前庭问题的人来说，这也是糟糕的用户体验。

用于动画的 CSS

在样式表或 <style> 元素中，许多选项可以结合在一起，为用户创造强大的体验。我们已经在本文档的前面提到了 animation 属性。它实际上是所有动画属性的简写，包括

  • animation-play-state
  • animation-duration 的值为 <time>；这是动画完成一个周期所需的时间。这可以以秒 (s) 或毫秒 (ms) 为单位指定。默认值 0s 表示不应发生动画。
  • animation-timing-function

动画属性本身已经很强大，但与 prefers-reduced-motion 等其他属性和查询结合使用，可以为用户设置一套强大的选项。将 animation-duration 和 transition-duration 属性设置为一个较短的持续时间，而不是将它们设置为 animation: none 和 transition: none，可以提供一种保障，以防止在动画需要运行时出现问题。

JavaScript 动画

JavaScript 通常用于控制 <canvas> 元素和 SVG。大多数适用于 HTML 视频的 JavaScript 代码也适用于音频。HTMLMediaElement.playbackRate 用于为视频和音频实现用户对播放速率的控制。值为 1.0 是默认值，被认为是正常速度；值为 0.5 是半速，值为 2.0 是两倍速。负数会向后播放视频或音频。设置播放速率属性：HTMLMediaElement.playbackRate = playbackSpeed。

document.getAnimations() 是一项实验性技术，包括 CSS 动画、CSS 过渡和Web 动画。MDN 关于 Document.getAnimations() 的页面提供了以下代码示例，演示如何将页面上的所有动画减慢到一半速度

js
document.getAnimations().forEach((animation) => {
  animation.playbackRate *= 0.5;
});

动画的图像源

最简单的方法之一是从一个已经存在的图像开始，将其用作图像源，然后对其进行动画处理。请记住，你可以在这里使用 GIF、JPG、PNG、SVG 和其他文件类型作为图像源，只要它们是你的环境中允许的文件类型和大小。由于安全问题，SVG 通常不被允许。MDN 文档《基本动画》提供了这方面的出色示例，它使用多个图像源来表示太阳、地球和月亮，并使用多种画布方法来控制地球绕太阳运行以及月亮绕地球运行的速度和动画。使用本教程提供的 codepen 调整代码中的 ctx.rotate，看看进行更改后动画会受到怎样的影响。

如果你绝对、必须使用闪烁动画……

确保它上面有控件。确保当观看者第一次遇到它时它是关闭的，并且用户必须选择加入才能看到动画。

一个用户无法使用控件的格式示例是 gif 文件。动画速度由 gif 图像本身控制。将动画 gif 转换为视频可以为动画添加控件，并给予用户自主权。有许多免费的在线转换器可供使用，例如 EZGif 和 GIF to MP4。

设定用户期望

在用户点击链接之前，给他们一个提示，告诉他们将会发生什么。描述将要播放的动画。请参阅 WCAG 2.2 成功标准 3.2.5 按请求更改。

保持小尺寸

如果你非要闪烁不可，请保持其尺寸小。一般来说，将闪烁的大小限制在大约 341 x 256 像素或更小的区域内。这个像素尺寸假设观看者与屏幕的距离是典型的。如前所述，如果图像要在近距离观看，比如在 VR 头盔中，这个尺寸可能太大了。WebVR 是一个开放规范，它使得在浏览器中体验 VR 成为可能。WebVR 可以在手机、电脑或头盔上体验。

如果你正在为使用眼罩的游戏或 VR 设计，或者可以被眼罩使用，例如在 Firefox Reality（一个用于虚拟现实的浏览器）中，请确保矩形的大小远小于 341 x 256 像素，因为图像离用户的眼睛更近。

降低对比度

通常情况下，在无障碍性方面，更高的对比度是件好事。文本颜色与其背景的对比度越大（根据 W3.org 关于良好对比度颜色的页面，技术上称为亮度对比度），这类内容就越容易阅读。视力低下的用户尤其感激为确保文本与背景的高对比度所做的努力。然而，当内容是动画时，降低对比度实际上是降低动画内容引起癫痫发作可能性的方法。如果在 1 秒内检测到 3 次闪烁，请降低对比度。

WCAG 2.2 中对比度的定义如下：

对比度

(L1 + 0.05) / (L2 + 0.05)，其中

最好能在上传或发布到网络之前调整对比度。对于视频和动画 GIF，Adobe Suite 产品是处理传统图像的绝佳资源。对于图像，还有一个在线工具 pinetools.com 的在线亮度和对比度调整。例如，如果你打算制作动画 GIF，请从对比度较低的图像开始。

JavaScript 也是动态降低对比度的一种选择。以下是来自标题为“示例：设置段落的背景颜色”部分的示例代码。请注意，示例中的颜色是在 RGB 色彩空间中描述的。

HTML 内容（链接到源页面）

html
<body>
  <input type="button" value="Set paragraph background color" />
  <p>hi</p>
  <p>hello</p>
</body>

JavaScript 内容（链接到源页面）

js
function setBackground() {
  // now, get all the p elements in the document
  const paragraphs = document.getElementsByTagName("p");

  // get the second paragraph from the list
  const secondParagraph = paragraphs[1];

  // set the inline style
  secondParagraph.style.background = "red";
}

document.querySelector("input").addEventListener("click", setBackground);

避免对闪烁内容使用完全饱和的红色

如本文档前面所述，美国癫痫基金会于 2004 年 8 月召开了一次研讨会，开始就光敏性癫痫达成专家共识。他们的研究结果之一是，“如果闪光的亮度至少为 20 cd/m2，频率至少为 3 Hz，并占据至少 0.006 球面度的立体视角（在典型观看距离下约占中央视野的 10% 或屏幕面积的 25%），则闪光是潜在的危险。向饱和红色的转换或从饱和红色的转换也被认为是一种风险。” 他们在同一共识中还指出：“无论亮度如何，向饱和红色的转换或从饱和红色的转换也被认为是一种风险。”

提供备用 CSS 样式

了解到大部分动画和闪烁都可以通过 CSS 方法控制，探索为用户提供备选方案，并使这些选项的控制方便可见，就显得很重要了。

备用样式表

现代浏览器会显示备用样式表中可用的备用 CSS，如果用户知道在哪里寻找它们的话。在某些情况下，备用样式会在用户通过“查看”菜单时显示，在另一些情况下，它们会体现在设置中，有时两者兼有。并非所有用户都知道通过浏览器或设置来寻找这些选项，所以考虑用老式的方法，用明显的按钮或链接来改变样式，这样用户就能看到它们。这样做不会与浏览器读取备用样式表的能力，或者用户在设置中设置偏好的能力相冲突或覆盖。

重要的是要知道，某些用户，例如那些依赖语音识别系统的用户，通常依赖于传统的按钮和链接，因为他们的残疾使他们无法使用鼠标，或者无法利用移动平板电脑上的触摸事件。

将备用样式表包含到 HTML 文档中的常用方法是使用 <link> 元素和 @import。

在网页的 <head> 部分，使用 <link> 元素，并结合 rel="alternate stylesheet" 和 title="…" 属性。

html
<head>
  <title>Home Page</title>
  <link href="main.css" rel="stylesheet" title="Default Style" />
  <link
    href="alternate1.css"
    rel="alternate stylesheet"
    title="Alternate One" />
  <link
    href="alternate2.css"
    rel="alternate stylesheet"
    title="Alternate Two" />
</head>

@import 也是一种引入样式表的方式，但它的支持不如 <link> 元素广泛。

css
@import "alternate1.css";
@import "alternate2.css";

通过使用备用样式表（记得添加标题），你正在为用户设置，让他们能够使用浏览器选择备用样式。

动态样式切换

依赖浏览器来显示备用样式的一个问题是，并非所有用户都具备足够的技术知识来发现备用样式。或者，由于他们的残疾，他们无法做到。按钮或链接让许多心怀感激的用户清楚地知道有可用的选项。有多种方法可以添加切换按钮，让用户切换到不同的样式表。也就是说，使用备用样式表并非唯一选择。另一个选择是操纵页面本身的样式。根据 MDN 文档《使用动态样式信息》，“在可能的情况下，通过 className 属性动态操作类确实是最佳实践，因为所有样式挂钩的最终外观都可以在单个样式表中控制”。 关于如何做到这一点，最好的例子之一来自 W3C 的页面《C29：使用样式切换器提供符合规范的备用版本》。

极端情况：纯文本替代方案

制作一个阻止图像显示的独立、备用样式表很容易。这是一种严厉的解决方案；但对于学校教师和其他必须为极度敏感人群服务的公务员来说，有时是必要的。这些公务员可以要求他们的开发者使用 display: none 开发一个特殊的备用样式表。以下是通过 CSS 实现的方法：

css
img {
  display: none;
}

利用媒体查询和 <style>

在设置媒体查询时，你正在为用户启用控件；这些控件在浏览器或操作系统中可用。请参阅 MDN 文档《无障碍性：用户可以做些什么来更安全地浏览》，以查看用户如何访问控件的更多详细信息。

prefers-reduced-motion

现代浏览器对 prefers-reduced-motion 的支持正在增长。

css
@media screen and (prefers-reduced-motion: reduce) {
}
@media screen and (prefers-reduced-motion) {
}

要看一个如何使用 prefers-reduced-motion 代码的绝佳示例，请访问 MDN 文档 prefers-reduced-motion，或参见下面来自“Chrome 74 新特性”部分的示例。

css
button {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

prefers-color-scheme

如果环境光 API 不可用，这可能很有用。支持正在出现。

css
@media (prefers-color-scheme: dark) {
  /* adjust styles for dark mode */
}

Window.matchMedia()

开发者可以通过 Window.matchMedia() 获得一个强大的工具。一个很好的资源是 MDN 关于 Window.matchMedia() 的文档。

媒体更新功能

屏幕刷新得越频繁，它在人眼看来就越稳定，“闪烁”就越少。绝大多数现代技术以不会引起光敏性问题的速率刷新。然而，并非每个人都富裕到能够负担得起最新技术：老旧或性能不足的计算机可能刷新率很低。AbilityNet 的情况说明书（2015 年 11 月）《计算机与癫痫》描述了更多关于刷新率的细节。

一篇很老的文章，Tech Republic 的 《癫痫与 CRT/LCD 屏幕闪烁》，有一个关于刷新率（Hz）的有趣回应

  • “这种效果是显而易见的，并且有记载，最高可达 70 赫兹。”
  • “这些研究似乎表明，你应该远离低于 70 赫兹的刷新率，并使用一个不能被 10 整除的速率。”

CSS-Tricks 的 Eric Bailey 发现了一种创新性地使用更新功能的方法，它与 animation-duration 或 transition-duration 结合使用，以人眼无法察觉的速率结束。换句话说，Eric 的技术解决了刷新率问题。下面的 CSS 来自 CSS-Tricks 的文章《再谈 prefers-reduced-motion，减少运动的媒体查询》。

css
@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.cn/revisiting-prefers-reduced-motion/#comment-1700170) */
    transition-duration: 0.001ms !important;
  }
}

update 媒体特性用于查询输出设备在内容渲染后修改其外观的能力。它有“none”、“slow”和“fast”三个值。

开发和实验性功能

媒体查询 Level 5

EnvironmentMQ（计划在媒体查询 Level 5 中）

light-level

light-level 有三个有效值：dim、normal 和 washed。有趣的是，该规范避免了以勒克斯为单位实际定义这三个级别，因为带有光传感器的设备通常会自动调整屏幕亮度。该规范还指出了技术上的差异，例如电子墨水在明亮的日光下仍然可读，而液晶则不然。

environment-blending

来自 W3C 的草案文档《媒体查询 Level 5》：“environment-blending 媒体特性用于查询用户显示器的特性，以便作者可以调整文档的样式。作者可能会根据显示技术调整页面的视觉效果和/或布局，以增加吸引力或提高可读性。”

用户偏好媒体特性（计划在媒体查询 Level 5 中）

W3C 编辑草案媒体查询 Level 5 中的用户偏好媒体特性在为用户提供媒体控制方面特别有前途。以下是一些亮点

inverted-colors

根据用户偏好媒体特性部分，“inverted-colors 媒体特性指示内容是正常显示，还是颜色已被反转。”

forced-colors

在 forced-colors-mode 中，用户代理在页面上强制执行用户首选的调色板，覆盖作者选择的颜色。来自 W3C 的草案文档《媒体查询 Level 5》关于 forced-colors 的部分：“forced-colors 媒体特性用于检测用户代理是否启用了 强制颜色模式，在该模式下，它会在页面上强制执行用户选择的有限调色板”。 用户需要被告知这个能力，并且它需要与 prefers-color-scheme 媒体查询的适当值协调一致。

light-level

来自 W3C 的草案文档《媒体查询 Level 5》关于 light-level 的部分：“light-level 媒体特性用于查询设备使用环境的光照水平，以允许作者相应地调整文档的样式。” 这对于那些有运动技能问题的人，或者一些有认知困难、无法找到正确“按钮”来更改屏幕设置的人来说，将是天赐之物。

prefers-contrast

来自 W3C 的草案文档《媒体查询 Level 5》关于 prefers-contrast 的部分：“prefers-contrast 媒体特性用于检测用户是否请求系统增加或减少相邻颜色之间的对比度。例如，许多用户难以阅读与文本背景对比度小的文本，并希望有更大的对比度。” 有时对比度也可能过高；在这种情况下，文本周围可能会出现光晕效应，实际上会降低易读性。将对比度的大小交给用户控制，无疑是无障碍性的一大福音。

MediaQueryList 接口

CSSWG.org 草案的 4.2 节与 HTML 中定义的事件循环集成。HTML 中关于 MediaQueryList 对象的内容。有关更多信息，请参阅 MDN 文档 MediaQueryList。

个性化帮助和支持

literal 属性的要求取自 WAI-Adapt：帮助和支持。

要求：一些用户无法理解非字面意义的文本和图标，如隐喻、成语等。literal 属性旨在将文本或图像标识为非字面意义，并允许作者向用户解释非字面意义的文本和图像。

另见

MDN

颜色

讨论

癫痫与癫痫发作

GPII

ISO

  • IEC 61966-2-2:2003(en) 多媒体系统和设备——色彩测量和管理——第 2-2 部分：色彩管理——扩展 RGB 色彩空间——scRGB

光敏性癫痫分析工具

与 Harding 工具一起，通常被认为是分析闪光的两大“黄金标准”之一。

W3C

帮助改进 MDN

了解如何贡献

本页面最后由 MDN 贡献者于修改。

在 GitHub 上查看此页面 • 报告此内容的问题