無障礙運動：在不失去意義的情況下為首選減少運動而設計
如何設計尊重減少運動設定和前庭障礙的運動：WCAG 需要什麼、刪除什麼、保留什麼以及如何測試。
核心要點
當使用者打開減少運動時，保留每個動畫的含義，但刪除運動：用短淡入淡或即時變化替換幻燈片、縮放和視差，停止自動播放循環，並且永遠不要僅依靠運動來傳達某些內容。在網路上，使用prefers-reduced-motion 媒體查詢偵測設定。
為什麼這很重要
對某些人來說，螢幕上的動作並不是品味問題。 W3C 指出，動畫可能引發前庭疾病，反應包括噁心、偏頭痛，嚴重時需要臥床休息才能恢復。作業系統允許人們要求減少運動，並且在網路上該請求被公開為首選減少運動媒體查詢。當使用者開啟該設定時，其值會減少。
WCAG 要求什麼
WCAG 的兩個成功標準涵蓋了運動。 2.2.2 暫停、停止、隱藏適用於自動開始的運動，例如輪播和循環動畫，並且需要一種暫停、停止或隱藏它的方法。 2.3.3 互動動畫（AAA 等級）適用於由使用者互動觸發的運動，並建議避免不必要的動畫、提供關閉動畫的控製或使用作業系統的減少運動設定。即使不需要 AAA，遵循它也是很好的做法。
去掉動作，保留意義
減少運動並不意味著沒有回饋。按下按鈕的用戶仍然需要知道它有效。目標是保持狀態變化並放棄旅行。
- 刪除或減少：大幻燈片、縮放、視差、滾動連結運動、旋轉、自動循環播放和背景影片。
- 保留：顏色和不透明度變化、焦點指示器、短狀態轉換、進度資訊。
- 替換：使用短交叉淡入淡出或即時變更進行頁面和麵板過渡。
- 從不：使用動作作為顯示錯誤、變更或新項目的唯一方式。
實施它
在網路上，將非必要的運動包裝在@media中（prefers-reduced-motion：no-preference），或在@media中覆蓋它（prefers-reduced-motion：reduce）。在 JavaScript 中，讀取 window.matchMedia('(prefers-reduced-motion: reduce)') 並監聽變更。本機平台公開相同的設定：SwiftUI、UIKit 和 Android 都允許您檢查它。如果您的設計系統具有運動標記，請為每個標記定義一個簡化變體，以便每個組件的行為相同。
測試
在作業系統中開啟減少動作並逐步完成每個關鍵流程。檢查沒有丟失任何重要內容，沒有循環自動啟動，並且滾動不會將內容移動到超出滾動本身的範圍。瀏覽器開發人員工具也可以模擬該設定。
生產實施片段
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });要記住的關鍵 Principle
- 運動會使一些人身體不適；尊重環境
- 去除行程、縮放、視差和自動播放；保留狀態變化和回饋
- WCAG 2.2.2涵蓋自動運動； 2.3.3 涵蓋互動引起的運動
- 在每個本機平台上偵測偏好減少動作的設置
- 為每個動作標記設計一個簡化的變體
常見問題解答
來源
- Understanding SC 2.3.3: Animation from Interactions — W3C 外語
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C 外語
- prefers-reduced-motion — MDN 網路文檔
- Motion — Apple 人機介面指南