動畫和動作

你是否曾在車上、船上或飛機上，突然感覺天旋地轉？或是偏頭痛發作時，手機或平板電腦上「取悅」你的動畫突然讓你感到不適？或者，你可能一直對所有類型的動作都很敏感？以下是不同類型前庭障礙的例子。

年滿 40 歲的成人中，有超過 35% 的人會出現某種形式的前庭功能障礙。這可能會導致暫時性暈眩、偏頭痛引起的眩暈，或更永久的前庭功能障礙。

除了引發暈眩，許多人也覺得移動、閃爍或捲動的內容會讓人分心。有ADHD和其他注意力缺陷障礙的使用者，可能會因為動畫元素而分心，甚至忘記自己造訪網站或應用程式的目的。

在本單元中，我們將探討如何為各種因動作觸發的疾病患者提供更完善的支援。

閃爍和移動的內容

建構動畫和動態效果時，請自問元素是否移動過度。舉例來說，螢幕上顏色從深到淺的閃爍，或是快速移動，都可能導致光敏感性癲癇患者發作。據估計，3% 的癲癇患者會對光線過度敏感，且女性和年輕人更常發生這種情況。

WCAG 的閃爍規範建議避免下列情況：

• 在任何一秒內閃爍超過三次
• 閃爍次數低於一般閃爍和紅燈閃爍次數門檻。

輕則無法使用網頁，重則可能導致疾病。

如有任何極端動作，請務必使用光敏性癲癇分析工具 (PEAT) 進行測試。PEAT 是一項免費工具，可判斷螢幕內容、影片或動畫是否可能引發癲癇。並非所有內容都需要經過 PEAT 評估，但如果內容包含閃爍或快速切換明暗背景顏色的效果，建議還是評估一下，確保安全無虞。

關於動畫和動態效果，您應該問問自己另一個問題：元素移動是否對瞭解畫面上的內容或動作至關重要？如果不是必要，請考慮從建構或設計的元素中移除所有動作，甚至是微動作。

假設您認為元素移動並非必要，但可以提升整體使用者體驗，或是您無法基於其他原因移除移動效果，在這種情況下，請遵循 WCAG 的動態效果指南。根據這些規範，您必須為使用者提供選項，以便暫停、停止或隱藏以下元素：自動開始、持續超過五秒，且屬於其他網頁元素的非必要移動、閃爍或捲動元素。

暫停、停止或隱藏動作

在網頁中加入暫停、停止或隱藏機制，讓使用者關閉可能造成問題的動態動畫。你可以在畫面層級或元素層級執行這項操作。

舉例來說，假設您的數位產品包含大量動畫。 考慮加入無障礙 JavaScript 切換按鈕，讓使用者控管自己的體驗。如果將按鈕切換為「動作關閉」，該畫面和所有其他畫面上的動畫都會凍結。

使用媒體查詢

除了慎選動畫、提供暫停/停止/隱藏動作的選項給使用者，以及避免無限循環的動畫，您也可以考慮加入以動作為主的媒體查詢。讓使用者在螢幕顯示內容方面有更多選擇。

@prefers-reduced-motion

與色彩模組中的色彩相關媒體查詢類似，@prefers-reduced-motion 媒體查詢會檢查與動畫相關的使用者 OS 設定。

使用者可以設定螢幕偏好設定，減少動態效果。這些設定在不同作業系統中有所差異，且可能以正面或負面方式呈現。使用 @prefers-reduced-motion，即可設計出符合這些偏好設定的網站。

在 macOS 和 Android 上，使用者可以開啟這項設定來減少動態效果。在 macOS 上，使用者可以在「設定」>「輔助功能」>「螢幕」中設定「減少動態效果」。Android 的設定為「移除動畫」。在 Windows 中，這項設定會以正面用語顯示為「顯示動畫」，且預設為開啟。使用者必須關閉這項設定，才能減少動態效果。

為確保動作障礙者能順利使用，即使動畫短於 WCAG 2.0 AA 指南規定的 5 秒門檻，也應謹慎處理。最可靠的方法是賦予偏好減少動作的使用者專屬的動畫控制權，讓他們能使用專用控制項 (例如播放和暫停按鈕) 啟動及停止動畫。

漸進增強動作

身為設計師和開發人員，我們有很多選擇，包括預設移動狀態和要顯示的移動量。請再看看最後一個有關動作的範例。

假設我們判定動畫對於瞭解螢幕上的內容並非必要，在這種情況下，我們可以選擇將預設狀態設為減少動態效果動畫，而非完整動態效果版本。除非使用者明確要求，否則動畫會處於關閉狀態。

我們無法預測哪些程度的動作會導致癲癇、前庭和其他視覺障礙患者發病。即使螢幕上只有少量動作，也可能引發暈眩、視力模糊等症狀，甚至更嚴重。因此在下列範例中，我們預設不使用動畫。

分層媒體查詢

你可以使用多個媒體查詢，為使用者提供更多選擇。你可以同時使用 @prefers-color-scheme、@prefers-contrast 和 @prefers-reduced-motion。

允許使用者選擇

在數位產品中加入動畫，讓使用者感到愉悅，固然是件有趣的事，但請務必記住，這些設計會影響部分使用者。動暈症可能影響任何人，輕則感到輕微不適，重則導致嚴重疾病或癲癇發作。

您可以使用多種工具，讓使用者自行決定最適合自己的設定，而不是猜測多少動作量才算過多。舉例來說，在網站或網頁應用程式中新增切換按鈕，開啟或關閉動畫。請考慮將這類切換按鈕預設為關閉。