癲癇和身體反應的網頁可訪問性

本文介紹了使網頁內容對患有前庭障礙的人員可訪問背後的概念，以及如何測量和防止導致癲癇發作和/或其他身體反應的內容。

由光引起的癲癇發作被稱為光敏性癲癇。閃爍、閃光或眨眼的內容可能會引發光敏性癲癇。使用影片、動畫 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/m²，頻率 ≥3 Hz，並且佔據 ≥0.006 球面度（大約 10% 的中心視野或典型觀看距離下螢幕面積的 25%）的立體角，則該閃爍是潛在的危險。”

典型的觀看距離是多少？撰寫本文時考慮的典型觀看距離建議是“該區域可以理解為適用於電視螢幕面積 >25% 的區域，假設標準觀看距離 ≥2 米（約 9 英尺）”。從那時起發生了很多變化，現在我們離螢幕更近了。

某些顏色和/或顏色的組合也很重要。"研究人員發現某些顏色更容易導致癲癇發作"指出，“…大腦動力學的複雜性可能會受到某些顏色組合的調節，而不是其他顏色組合，例如，紅藍閃爍刺激比紅綠或藍綠刺激引起更大的皮層興奮。”

閃爍和紅色閃爍

WCAG 2.3.1 一般閃爍和紅色閃爍閾值定義如下

一般閃爍定義為相對亮度變化幅度為最大相對亮度 10% 或以上的一對相反變化，其中較暗影像的相對亮度低於 0.80，並且其中“一對相反變化”是指先增加後減少，或先減少後增加；
紅色閃爍定義為任何涉及飽和紅色的成對相反過渡。

這些標準基於早期的研究。2004 年，美國癲癇基金會召集了一個研討會，制定了關於光敏性癲癇發作的共識，宣告“如果閃爍的亮度至少為 20 cd/m²，頻率至少為 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/m²，並且圖案呈現 ≥0.5 秒時，則該圖案不應顯示超過 5 對明暗條紋，如果條紋改變方向、振盪、閃爍或對比度反轉；如果圖案是不變的或在一個方向上平滑漂移，則不超過 8 條條紋。”

並非所有內容都是已知的，即使使用上面列出的指標，也會有其他因素髮揮作用。例如，從較小的區域到較大的區域會增加大腦反應的可能性，以及增加對比度，以及從低到中增加空間頻率。雖然背後的原因尚不清楚，但從簡單的方向（例如，條紋）到多個方向（例如，將一組條紋疊加在另一組條紋上，但垂直於原始組，從而產生的棋盤格圖案）也會影響大腦。

顏色

瞭解顏色對於無障礙至關重要。請參閱瞭解顏色和亮度，因為它與網頁無障礙和總體無障礙相關。

顏色與其背景的關係（通常以對比度來表示），以及顏色在動畫中逐幀變化的程度非常重要。有關此內容的更多資訊，請參閱三閃或以下閾值理解 SC 2.3.1。

紅色的特殊情況

已經證明某些顏色比其他顏色更容易導致癲癇發作。人類生理和心理通常會受到紅色的影響。它影響行為的力量甚至在動物身上也得到了證實。

紅色飽和度測試： 人眼對紅色非常敏感，眼科醫生利用這一點設計了測試。紅色飽和度測試評估視神經的完整性。有關眼科醫生如何使用此測試的更多資訊，請參閱紅色飽和度。
紅色環境： 研究表明，對於遭受外傷性腦損傷的人群，在紅色環境中認知功能會下降。

飽和紅色是一種特殊且危險的情況，並且有專門的測試來檢測它。除了紅色環境會影響外傷性腦損傷患者的認知功能外，紅色光譜波長範圍內的顏色似乎也需要特別關注和專門的測試。Gregg Vanderheiden 博士在測試感光性癲癇分析工具時，發現癲癇發作率遠高於預期。他們發現我們對飽和的紅色閃爍非常敏感。（參見影片感光性癲癇分析工具。）

網路安全並不意味著防癲癇安全

請注意，顏色#990000被認為是“網路安全”。但這並不意味著它“安全不會引起癲癇發作”，它僅僅意味著該顏色可以透過用於在螢幕上生成顏色的技術“安全地”準確地再現。

測量以防止傷害

衡量潛在危害是一個良好的起點。測試中考慮的因素包括顏色、亮度、大小、對比度，以及在動畫的情況下，頻率。WCAG 2.1 提供了評估內容的指南。

2004年8月，美國癲癇基金會召開了研討會，開始制定關於感光性癲癇發作的專家共識。以下專家和權威資訊來自：光和圖案誘發的癲癇發作：美國癲癇基金會工作組的專家共識。

如果閃光具有≥20 cd/m²的亮度，以≥3 Hz的頻率出現，並且佔據≥0.006 球面的立體角（大約佔中央視野的10% 或在典型觀看距離下佔螢幕面積的25%），則該閃光存在潛在危險。向飽和紅色過渡或從飽和紅色過渡也被認為是一種風險。可能引發癲癇發作的圖案包含清晰可辨的條紋，在任何方向上都有超過五對明暗條紋。當任何圖案的明暗條紋在眼睛處從最小預期觀看距離共同張開大於0.006 球面的立體角時，最亮條紋的亮度大於50 cd/m2，並且圖案呈現時間≥0.5 秒，則圖案不應顯示超過五對明暗條紋，如果條紋改變方向、振盪、閃爍或對比度反轉；如果圖案是不變的或在一個方向上平滑漂移，則不應超過八條條紋。這些原則在固定媒體（例如，預先錄製的電視節目，可以逐幀分析）的情況下更容易應用，而互動式媒體則比較困難。

“cd/m²”指的是每平方米坎德拉。那麼對於網頁開發者來說，這與顏色、亮度和飽和度的測量值有什麼關係呢？

坎德拉是光強度的 SI 單位（國際單位制）。它是一個光度術語，而光度學處理的是人類眼睛感知到的可見光的測量。維基百科關於“每平方米坎德拉”的文章將其用我們作為開發人員所熟悉的方式表達：在顯示裝置上，以及在 RGB 色域中。這很有幫助，因為假設顯示器、印表機和網際網路上使用的是特定的標準，那就是sRGB（標準紅綠藍）。

作為每單位面積發光量的度量，該單位經常用於指定顯示裝置的亮度。sRGB顯示器規格的目標是 80 cd/m²。^[3] 通常，校準後的顯示器應具有 120 cd/m² 的亮度。大多數消費級臺式液晶顯示器的亮度為 200 到 300 cd/m²。^[4] 高畫質電視的亮度範圍為 450 到大約 1500 cd/m²。

關鍵在於，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 是否是動畫

npm 的 animated-gif-detector 允許在給定的 HTTP 請求中儘早確定動畫。
Zakirt 提供了一個關於animated-gif-detect.js的 gist

對於動畫 GIF，請確保動畫在使用者選擇啟用之前處於非活動狀態。例如，使用者必須按下按鈕或選中複選框才能啟動動畫。

檢測和控制動畫 GIF 的資源包括

RunKit 動畫 GIF 檢測器
github.com/rubentd/gifplayer，一個 jQuery 外掛，可幫助您在網站上播放和停止動畫 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() 的頁面提供了以下程式碼示例，說明如何將頁面上所有動畫的速度降低到一半

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)，其中

L1 是顏色中較亮顏色的相對亮度，並且
L2 是顏色中較暗顏色的相對亮度。

最好在將內容上傳或釋出到網路之前調整對比度。對於影片和動畫 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 內容 (連結到源頁面)

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。

`<link>` 元素

在網頁的 <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.com/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 所需的功能。

顏色教程：描述顏色 Tom Jewett
確定 RGB 顏色亮度的公式 Stack Exchange 討論主題
紅色如何影響我們的行為科學美國人 Susana Martinez-Conde、Stephen L. Macknik 於 2014 年 11 月 1 日發表

討論

癲癇和癲癇發作

揭示光敏性，癲癇中最複雜的情況之一癲癇基金會：“某些人天生對閃爍的光線或對比鮮明的視覺圖案（例如條紋、網格和棋盤格）特別敏感。由於這種情況，當暴露於此類視覺刺激時，他們的大腦會產生類似癲癇發作的放電。”
伽馬振盪和光敏性癲癇當前生物學第 27 卷，第 9 期，2017 年 5 月 8 日，第 R336-R338 頁：“某些視覺影像，即使在沒有運動或閃爍的情況下，也可能引發光敏性癲癇患者的癲癇發作。”
光敏性癲癇發作。雪松西奈 “光敏性癲癇發作是由閃爍或閃爍的光線引起的。這些癲癇發作也可能由某些圖案（如條紋）觸發。”
光和模式誘發性癲癇發作：美國癲癇基金會工作組專家共識 Eplepsia 2005 年 9 月，第 46 卷（第 9 期）：1423-5 PubMed.gov NCBI Harding G、Wilkins AJ、Erba G、Barkley GL、Fisher RS；美國癲癇基金會工作組。

GPII

無障礙性主列表 Gregg Vanderheiden 博士編輯

Harding

除了 PEAT 工具外，通常被認為是分析閃光現象的兩個“金標準”之一。

Harding 閃光和圖案分析儀

ISO

IEC 61966-2-2:2003(en) 多媒體系統和裝置 — 顏色測量和管理 — 第 2-2 部分：顏色管理 — 擴充套件 RGB 顏色空間 — scRGB

光敏性癲癇分析工具

除了 Harding 工具外，通常被認為是分析閃光現象的兩個“金標準”之一。

W3C

CSS 顏色模組級別 3
個性化語義直譯器 1.0。工作草案
個性化工具 1.0 工作草案
三個或以下閃光閾值理解 SC 2.3.1 理解 WCAG 2.0（較舊，但包含 WCAG 2.1 標準中引用的某些解釋）
三個或以下閃光閾值理解成功標準 2.3.1 理解 WCAG 2.1
理解成功標準 1.4.3：對比度（最小值）
Web 無障礙倡議 (WAI)
Web 動畫模型 W3C 工作草案
Web 內容無障礙指南 (WCAG) 2.0 相對亮度定義
Web 內容無障礙指南 (WCAG) 2.1

貢獻者

衷心感謝 Teal；W3C 低視力工作組的 Wayne Dick；來自 Knowbility 的 Tom Jewett 和 Eric Eggert；來自 Diagram Center 的 Jim Allan；以及佛羅里達州坦帕市 USF 和 TGH 綜合癲癇專案和臨床神經生理學實驗室主任 Selim R. Benbadis 博士，感謝他們對該主題提供的巨大幫助和討論。

我們都非常感謝 Trace 研究與開發中心免費提供其令人驚歎的工具光敏性癲癇分析工具 (PEAT)。

多大？這取決於

紅色的特殊情況

網路安全並不意味著防癲癇安全

勿傷人

瞭解惡意

控制曝光，控制訪問

不要索引，不要跟蹤

檢測 GIF 是否是動畫

以程式設計方式確保控制元件可用

影片

音訊

作為影片一部分的音訊

常見的動畫檔案型別

文字也可以進行動畫處理

動畫的影像源

如果您絕對必須使用閃爍動畫……

設定使用者預期

保持小尺寸

降低對比度

避免在閃爍內容中使用完全飽和的紅色

替代樣式表

<link> 元素

利用 <style> 中的媒體查詢

prefers-reduced-motion

prefers-color-scheme

Window.matchMedia()

媒體更新功能

使用者首選項媒體功能（計劃在媒體查詢級別 5 中使用）

MediaQueryList 介面

個性化幫助和支援

過渡（適用於 CSS 和 SVG）

`<link>` 元素

利用 `<style>` 中的媒體查詢

`prefers-reduced-motion`

`prefers-color-scheme`

`MediaQueryList` 介面