癫痫和身体反应的网页可访问性

本文介绍了使网页内容对患有前庭障碍的人员可访问背后的概念，以及如何测量和防止导致癫痫发作和/或其他身体反应的内容。

概述

癫痫发作

由光引起的癫痫发作被称为光敏性癫痫。闪烁、闪光或眨眼的内容可能会引发光敏性癫痫。使用视频、动画 GIF、动画 PNG、动画 SVG、Canvas 以及 CSS 或 JavaScript 动画的 Web 技术都能够生成可能诱发癫痫发作或其他使人丧失能力的身体反应的内容。某些视觉图案，尤其是条纹，也可能导致身体反应，即使它们不是动画。光敏性癫痫实际上是一种“反射性癫痫”——癫痫发作是响应触发因素而发生的。在光敏性癫痫的情况下，癫痫发作是由闪光触发，但其他类型的反射性癫痫可能是由阅读行为或噪音触发的。图案和图像也可能引发癫痫。

静态图像可能导致癫痫发作和其他疾病的事实已在诸如“伽马振荡和光敏性癫痫”等文章中有所记载，其中指出“即使在没有运动或闪烁的情况下，某些视觉图像也可能在光敏性癫痫患者中引发癫痫发作”。癫痫基金会在其文章“揭示光敏性，癫痫最复杂的情况之一”中谈到了静态图像和图案：“由于明暗条纹的交替，可辨别的明暗条纹的静态或移动图案与闪光具有相同的效果。”美国癫痫基金会工作组能够稍微“量化”这个问题：“可能引发癫痫发作的图案包含清晰可辨的条纹，在任何方向上，条纹数超过五组明暗条纹。”此外，根据西奈山医疗中心的说法，棋盘格图案也已知会引起光敏性癫痫发作。

尽管静态图像可能是触发因素，但它们不太一致。已得到充分证实且有效的触发因素是闪光/频闪灯。USF 综合癫痫项目主任 Selim Benbadis 医生指出，“唯一真正有文献记载的是闪光，它可能在光敏性癫痫患者中引发癫痫发作。不过，只有少数类型的癫痫是光敏性的，绝大多数癫痫都不是。”除了由光敏性引起的癫痫发作外，听某些音乐也会引发所谓的音乐性癫痫，尽管这种类型的癫痫似乎要少得多。要了解音乐性癫痫，请访问安大略省癫痫协会的网页音乐性癫痫。

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

关键是，癫痫发作绝对可能并且确实会致命，开发人员和设计人员在使 Web 成为对光敏或音乐性触发因素敏感人士更安全的地方方面至关重要。

癫痫发作可能致命，但即使是“仅仅”使人虚弱的癫痫发作也可能严重到使用户丧失能力。其他疾病，如迷失方向、恶心、呕吐等也可能严重到使用户无法正常运作。癫痫基金会文章“光敏性和癫痫发作”提供了一个可能导致光敏人群癫痫发作的触发因素列表；以下是该列表中的摘录。

  • 由于闪烁或滚动图像导致的电视屏幕或计算机显示器。

  • 包含快速闪烁或不同颜色交替图案的某些电子游戏或电视广播。
  • 强烈的频闪灯，例如视觉火警报警器。
  • 自然光，例如阳光，尤其是在水面闪烁、透过树木或百叶窗缝隙时。
  • 某些视觉图案，特别是对比色条纹。

同一篇文章继续指出，许多因素必须共同作用才能引发光敏反应。值得注意的是，它包括光波长作为可能因素；光谱红色部分的波长似乎尤其成问题。在文章"理解 WCAG 2.0 三闪或以下阈值"中，通常指出：“患有光敏性癫痫发作的人可能会因以特定频率闪烁的内容（超过几次闪烁）而引发癫痫发作”，并特别指出：“人们对红色闪烁比其他颜色更敏感，因此针对饱和红色闪烁提供了一个特殊的测试”。

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

对于有运动技能障碍的人来说，还存在其他担忧。例如，Trace Research & Development Center 的光敏性癫痫分析工具页面指出，“光敏性癫痫发作可能会因网页或电脑内容中的某些类型的闪烁而引发，包括鼠标悬停导致屏幕大面积快速反复闪烁”。

其他身体反应

恶心、眩晕（或头晕）和迷失方向是与各种疾病相关的非常非特异性症状，并不特别提示癫痫发作（也许除了迷失方向，这在癫痫发作中可见）。但是，癫痫发作并不是闪烁、闪烁、眨眼和其他此类刺激可能产生的唯一不良身体反应。1997 年，一部日本卡通片中出现了一个动画“病毒炸弹”。一些观看这部卡通片的儿童出现了癫痫发作，另一些儿童则出现了恶心、颤抖和呕吐血的症状。儿童的反应非常严重，不得不被送往急诊室。以下列出的身体疾病都是可能的后果：每一种身体反应都可能严重到导致丧失能力。

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

闪烁、眨眼和闪烁

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

需要注意的是，并非所有闪烁和眨眼都是不好的。美国国家航空航天局在其名为"闪烁、闪烁和时间响应"的文件中指出，闪烁和闪烁可以成为吸引注意力的强大工具——这对于警告按钮是必要的（假设用户在元素闪烁时仍然可以看到屏幕，这并不总是正确的）。对于某些用户来说，闪烁按钮也提醒他们必须谨慎使用，并注意安全。在网页设计中，通过“劫持”屏幕以提供紧急警告来提醒公司员工危险的系统需要考虑屏幕上闪烁警告的速率、大小和亮度变化。

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

根据文章"光敏和图案诱发的癫痫发作：美国癫痫基金会工作组专家共识"，“如果闪烁的亮度 ≥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，“同时发生的闪烁的组合面积不超过显示屏幕区域上的任何 341 x 256 像素矩形的四分之一，当内容以 1024 x 768 像素显示时。”

视野是一个重要考虑因素的观点出现在处理 WCAG 2.3.1 的文章中，继续说道：“1024 x 768 屏幕用作评估的参考屏幕分辨率。341 x 256 像素块代表典型观看距离下的 10 度视口。（10 度视野取自原始规格，代表眼睛的中心视觉部分，人们对光刺激最敏感。）”

此像素面积比率计算相对大小，但距离也很重要。

距离很重要，因为它会影响总视野。当观看者佩戴游戏用眼罩时，视野很可能完全被屏幕包围。WebVR 是一种开放规范，使您能够在浏览器中体验 VR，可以在手机、电脑或头显上体验。关于眼罩中闪烁图像的担忧越来越大，因为眼罩非常靠近眼睛。

癫痫协会（英国）在其文章"3D 电影和虚拟现实"中指出：“对于 VR，图像闪烁非常快，通常对于患有光敏性癫痫的人来说，这快到无法引发癫痫发作。但是，视野很大，因此刺激了更多的眼睛。这意味着可能影响更多的大脑区域，这可能会引发光敏性癫痫发作。”

（请注意，某些用户将无法看到闪烁的光标，并且可能会出现偏头痛、晕动症和迷失方向，尽管闪烁的光标占据的屏幕面积要小得多。）

图案和视差

对比鲜明的明暗几何图案是已知的罪魁祸首；条纹和格子是最著名的例子。美国癫痫基金会工作组列出了哪些条纹数量的明暗对可能引发癫痫发作，以及在什么条件下。如果图案是不变的直线，则允许的最大条纹数为 8 条，但如果它呈波浪形，则不超过 5 条。

视差效果会导致迷失方向。谨慎使用视差效果；如果必须使用它们，请确保用户有控件可以将其关闭。

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

并非所有内容都是已知的，即使使用上面列出的指标，也会有其他因素发挥作用。例如，从较小的区域到较大的区域会增加大脑反应的可能性，以及增加对比度，以及从低到中增加空间频率。虽然背后的原因尚不清楚，但从简单的方向（例如，条纹）到多个方向（例如，将一组条纹叠加在另一组条纹上，但垂直于原始组，从而产生的棋盘格图案）也会影响大脑。

颜色

了解颜色对于无障碍至关重要。请参阅了解颜色和亮度，因为它与网页无障碍和总体无障碍相关。

颜色与其背景的关系（通常以对比度来表示），以及颜色在动画中逐帧变化的程度非常重要。有关此内容的更多信息，请参阅三闪或以下阈值理解 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。[3] 通常，校准后的显示器应具有 120 cd/m2 的亮度。大多数消费级台式液晶显示器的亮度为 200 到 300 cd/m2。[4] 高清电视的亮度范围为 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.

Harding 测试

由于禁止将 PEAT 工具用于商业用途，电视节目制作人可以在HardingTest.com上使用 Harding 测试。Harding 测试是另一个黄金标准。各个国家的电视节目制作人在能够播出之前必须通过此测试，因此HardingTest.com 的团队提供视频内容的分析和认证。

Harding Flash and Pattern Analyzer.

开发人员的可访问性解决方案

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

网页开发者可以做什么

勿伤人

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

了解恶意

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

2016 年 12 月，知名癫痫患者记者 Kurt Eichenwald 在收到一个动画 gif 后发生癫痫发作，此后引发了一系列法律诉讼：闪烁的 gif 上载着信息“你应该因为你的帖子而癫痫发作”。

控制曝光，控制访问

控制页面曝光是确保易受癫痫发作影响的人不会意外接触到它的关键。WCAG 指出，单个对象可能使整个页面无法使用。

如果您认为您可能拥有可能导致癫痫发作的图像或动画，请首先显示有关内容的警告，然后将其放在用户必须选择加入的位置，例如点击按钮，或确保指向该页面的链接包含清晰明显的警告，从而控制对其的访问。

考虑使用元数据，例如<meta name="robots" content="noindex, nofollow">，以便搜索引擎不会索引该页面。

不要索引，不要跟踪

通过不索引页面，用户通过搜索偶然发现它的可能性将降低。

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

动画 GIF

所有图像类型都可能存在危险，但是，由于动画 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 属性，以便用户可以停止和启动视频。

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 属性，该属性控制是否显示用于播放媒体项目的用户界面控件。

视频

要确保视频具有用户可以访问的控件，请确保您将单词“controls”添加到 HTML 视频和音频元素中。

<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 实时标准中关于 静音媒体属性 描述的部分。它解释说，视频将在后台静音自动播放，直到用户采取措施取消音频静音。

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

控制速度

这似乎很明显，但由于 MIME 类型众多，处理它们的方法差异很大，因此没有一个万能的解决方案。文件分类方式也会进一步增加处理复杂性。例如，.gif 文件格式通常被理解为图像，但由于其动画功能，在某些情况下也被认为是视频文件格式。有关媒体类型的完整列表，请访问 IANA.org 的媒体类型页面。

嗅探它们的方法不是一件轻松的事情。您可能对遵循 whatwg.org 上的 MIME 嗅探 标准感兴趣。几乎所有类型的图像都可以进行动画处理；它们的动画方式各不相同，因此动画控制也各不相同。

常见的动画文件类型

  • 位图：动画
  • 画布：MDN 的 Canvas 教程中有一节关于 基本动画 的内容。setInterval() 是 Canvas 动画中的主要方法，但了解它如何与屏幕刷新交互也很有趣。请参阅文章，“使用 requestAnimationFrame 控制 fps？”，其中讨论了在屏幕刷新背景下实现 requestAnimationFrame 的来龙去脉。
  • GIF（光栅）：难以破解，因为它们的动画控制位于 GIF 文件本身中。有关控制 GIF 速度的信息，请参阅 W3C 的 “G152：将动画 GIF 图像设置为在 n 个循环后停止闪烁（在 5 秒内）”。一篇关于此主题的优秀的 Stack Overflow 文章是，“您可以使用 JavaScript 控制 GIF 动画吗？”
  • GIFV（光栅）：被认为是 GIF 的变体，GIF 的视频版本。该格式未标准化，必须引用其他位置存在的“真实”视频文件（例如 .webm 文件）。
  • JPG（光栅）
  • MNG（光栅）：多图像网络图形是一种用于动画图像的图形文件格式。也有人认为它是一种视频格式。
  • PNG、APNG（光栅）：可移植网络图形和动画可移植网络图形都可以进行动画处理。
  • SVG（矢量）：MDN 文档，“SVG：可缩放矢量图形”，指出“SVG 是一种基于文本的开放 Web 标准。它明确设计为与其他 Web 标准（如 CSS、DOM 和 SMIL）一起使用。” SVG 可以像在此示例中一样用作图像：<img src="example.svg" alt="这是一个使用 svg 作为源的图像">。这意味着可以通过 CSS 关键帧和动画来控制 SVG 的外观和动画。有关与 JavaScript 的交互，请参阅 MDN 文档中的 SVG 接口 和 将 SVG 效果应用于 HTML 内容。
  • 体素（光栅）：三维 体素 光栅图形用于视频游戏以及医学成像。

文本也可以进行动画处理

翻译和转换可以在 div 中对文本进行动画处理，并造成危害。虽然它是一项实验性技术，但正在开发 CSSKeyframe.keyText。移动文本会引发癫痫发作，原因与移动图像相同，因此请避免对文本进行动画处理。无论如何最好避免使用移动文本，因为许多屏幕阅读器无法读取移动文本，即使对于没有视力或前庭问题的人来说，它也是糟糕的用户体验。

动画的 CSS

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

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

animation 属性本身已经很强大，但与其他属性和查询（如 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.1 成功标准 3.2.5 按需更改。

保持小尺寸

如果您绝对必须有闪烁，请保持小尺寸。一般来说，将闪烁区域的大小限制在约 341 x 256 像素或更小。此像素大小假设观看者与屏幕保持典型距离。如前所述，如果要在近距离观看图像（例如在 VR 头显中），此尺寸可能过大。

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

降低对比度

通常来说，在辅助功能方面，更高的对比度是一件好事。文本颜色与其背景的对比度越大（根据 W3.org 关于 对比度良好的颜色 的页面，技术上称为亮度对比度比率），此类内容就越容易阅读。视力低下的人尤其感谢确保文本与其背景之间的高对比度的努力。但是，当内容具有动画效果时，降低对比度实际上是降低动画内容引起癫痫发作可能性的方法。如果检测到一秒钟内出现三次闪烁，则降低对比度比率。

对比度比率在 WCAG 2.1 中定义如下

对比度比率

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

最好在将内容上传或发布到网络之前调整对比度。对于视频和动画 GIF，Adobe 产品套件是传统图像的绝佳资源。对于图像，可用的在线工具是 pinetools.com 的 在线亮度和对比度。例如，如果您打算制作动画 gif，请从对比度比率较低的 gif 开始。

JavaScript 也是动态降低对比度的一种选择。以下是一个代码示例，摘自 MDN 文档 使用 JavaScript 和 DOM 接口遍历 HTML 表格 中标题为 “示例：设置段落的背景颜色” 的部分。请注意，示例中的颜色以RGB颜色空间描述。

HTML 内容 (链接到源页面)

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

JavaScript 内容 (链接到源页面)

js
function set_background() {
  // get a list of all the body elements (there will only be one),
  // and then select the zeroth (or first) such element
  myBody = document.getElementsByTagName("body")[0];

  // now, get all the p elements that are descendants of the body
  myBodyElements = myBody.getElementsByTagName("p");

  // get the second item of the list of p elements
  myP = myBodyElements[1];
  myP.style.background = "rgb(255 0 0)";
}

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

如本文档前面所述，美国癫痫基金会于 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> 元素。

html
<style>
  @import url(alternate1.css);
  @import url(alternate2.css);
</style>

通过使用替代样式表（请记住添加标题），您正在为用户设置使用其浏览器选择替代样式的功能。

动态样式切换

依赖浏览器显示替代样式的一个问题是，并非所有用户都具备足够的技术知识来发现替代样式。或者，由于他们的残疾，无法做到这一点。按钮或链接使许多感谢用户的用户清楚地知道有选项可用。有多种方法可以添加切换按钮，允许用户切换到不同的样式表。也就是说，使用替代样式表并非唯一的选择。另一种选择是操作页面本身的样式。根据 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 Hz。”
  • “这些研究似乎表明，您应该避免使用低于 70 Hz 的刷新率，并使用不以 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.org.cn/revisiting-prefers-reduced-motion/#comment-1700170) */
    transition-duration: 0.001ms !important;
  }
}

来自 W3.org 关于 媒体查询 4 的页面

update 媒体功能用于查询输出设备在内容呈现后修改内容外观的能力。它的值有“none”、“slow”和“fast”。

开发和实验功能

媒体查询级别 5

EnvironmentMQ（计划在媒体查询级别 5 中使用）

light-level

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

environment-blending

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

用户首选项媒体功能（计划在媒体查询级别 5 中使用）

用户首选项媒体功能 在 W3C 编辑草案媒体查询级别 5 中特别有希望在提供用户对媒体的控制方面。以下是一些亮点

inverted-colors

根据 用户首选项媒体功能 部分，“inverted-colors 媒体功能指示内容是正常显示还是颜色已反转。”

forced-colors

在 forced-colors-mode 中，用户代理在页面上强制执行用户首选的调色板，覆盖作者选择的颜色。来自 W3C 草案文档媒体查询级别 5 中关于 forced-colors 的部分：“forced-colors 媒体功能用于检测用户代理是否启用了强制颜色模式，在这种模式下，它会在页面上强制执行用户选择的有限颜色调色板”。用户需要意识到这种能力，并且需要使其与 prefers-color-scheme 媒体查询的适当值配合使用。

light-level

来自 W3C 的草案文档，媒体查询级别 5 中关于光照级别的部分：“light-level 媒体特性用于查询设备所处的环境光照级别，以便作者根据光照情况调整文档的样式。” 这对于那些有运动技能问题或认知障碍的人来说将是一个福音，他们无法找到合适的“按钮”来更改屏幕设置。

prefers-contrast

来自 W3C 的草案文档，媒体查询级别 5 中关于 prefers-contrast 的部分：“prefers-contrast 媒体特性用于检测用户是否已请求系统增加或减少相邻颜色之间的对比度。例如，许多用户难以阅读与文本背景对比度较小的文本，更倾向于更高的对比度。” 有时候对比度过高也会带来问题；在这种情况下，文本周围会出现光晕效果，反而降低了可读性。将对比度控制权交给用户对于无障碍性来说绝对是一份礼物。

MediaQueryList 接口

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

个性化帮助和支持

literal 属性的要求取自 第 23 节 非文字文本和图像。

需求：有些用户无法理解非文字文本和图标，例如隐喻、习语等。literal 属性旨在识别非文字文本或图像，并允许作者向用户解释非文字文本和图像。

过渡（适用于 CSS 和 SVG）

以下内容来自 Web 动画模型 CSSWG.org 草案

Web 动画模型旨在提供表达 CSS 过渡、CSS 动画 和 SVG 所需的功能。

另请参阅

MDN

颜色

讨论

癫痫和癫痫发作

GPII

Harding

除了 PEAT 工具外，通常被认为是分析闪光现象的两个“金标准”之一。

ISO

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

光敏性癫痫分析工具

除了 Harding 工具外，通常被认为是分析闪光现象的两个“金标准”之一。

W3C

贡献者

衷心感谢 Teal；W3C 低视力工作组 的 Wayne Dick；来自 Knowbility 的 Tom Jewett 和 Eric Eggert；来自 Diagram Center 的 Jim Allan；以及佛罗里达州坦帕市 USF 和 TGH 综合癫痫项目和临床神经生理学实验室 主任 Selim R. Benbadis 博士，感谢他们对该主题提供的巨大帮助和讨论。

我们都非常感谢 Trace 研究与开发中心免费提供其令人惊叹的工具 光敏性癫痫分析工具 (PEAT)。