兩年前，我探索了prefers-reduced-motion ，這是Safari 10.1中引入的媒體查詢，以改善前庭疾病和癲癇用戶的網(wǎng)絡(luò)可訪問性。原始文章討論了查詢的背景，必要性和實施，以防止運動引起的問題。

這是在Orde Saunders在用戶查詢中的出色工作以及Val Head對Web動畫中運動敏感性的見解。

快進到2019年，主要的桌面瀏覽器現(xiàn)在支持此關(guān)鍵功能！野生動物園（Safari）帶領(lǐng)，緊隨其後的是Firefox。 Chrome稍後加入，從第74版開始支持。

瀏覽器支持詳細信息可在Caniuse.com上獲得（一個數(shù)字表示該版本的支持）。

桌面瀏覽器支持

移動/平板電腦瀏覽器支持

儘管Microsoft Edge當前缺乏支持，但它與Chrome的集成屬於即將進行。這種過渡提供了潛在的上行空間：Edge的強大可訪問性功能可能包含在Chrome中。

提高意識

儘管某些網(wǎng)站和應(yīng)用程序利用prefers-reduced-motion ，但其採用在CSS和可訪問性社區(qū)之外仍然存在令人驚訝的限制。這並不完全出乎意料； CSS功能通常被低估了，甚至更高的可訪問性。

可以理解的是，開發(fā)人員可能會忽略一個相對較新的功能，尤其是在快速節(jié)奏的行業(yè)中。市場優(yōu)先事項嚴重影響開發(fā)人員的重點。但是， prefers-reduced-motion是圖書館敏銳的，並與OS級別的設(shè)置集成，表明長期相關(guān)性。

它的真正價值在於給招聘人員留下深刻的印象，而是在增強受影響用戶的生活。此簡單的媒體查詢可以防止用戶簡單地瀏覽或與網(wǎng)站互動的極大不適。

對受影響用戶的影響

殘疾是複雜且多方面的，包括廣泛的永久性，臨時，環(huán)境和情境因素。許多人錯誤地專注於視覺障礙。殘疾的影響差異很大，什麼可以幫助一個人傷害另一個人。

對於患有前庭疾病，偏頭痛或癲癇發(fā)作誘因的人，網(wǎng)絡(luò)瀏覽可能具有挑戰(zhàn)性。意外的動畫會觸發(fā)衰弱的癥狀。對於那些非常依賴Web應(yīng)用程序的工作的人來說，這尤其有問題。他們可能無法控制自己的工作設(shè)備或工作選擇。

這是一個誤解，每個人都知道自己的狀況或觸發(fā)因素。初始觸發(fā)事件有時會提高靈敏度。 Facundo Corradini的文章“前庭疾病的可及性”雄辯地描述了這一經(jīng)歷。

此外，並非所有輔助技術(shù)用戶都精通技術(shù)。它們可能不知道減輕運動的操作系統(tǒng)設(shè)置或瀏覽器擴展?？紤]使用鎖定公司設(shè)備的用戶，那些不熟悉其設(shè)備功能的用戶，或使用廉價或較舊設(shè)備的用戶，而這些設(shè)備的用戶缺乏對prefers-reduced-motion的支持。

評估潛在的傷害

旨在鼓勵參與的動畫可以相反地將用戶驅(qū)逐出境。儘管難以量化，但這種負面影響是真實的。故意損害更容易衡量，儘管解決了這一傷害，提出了進一步的挑戰(zhàn)。

對大量用戶群的重大傷害會影響品牌。即使無法闡明原因，過度實施的動畫也可以阻止用戶。

我們不能也不應(yīng)該知道每個用戶的特定情況。積極主動，體貼的方法至關(guān)重要。

動畫作為漸進式增強

並非所有設(shè)備都可以很好地渲染動畫。低功率設(shè)備可能會掙扎，專門的瀏覽模式（例如閱讀器模式）可能會完全更改或刪除動畫。這強調(diào)了強大設(shè)計的重要性。

動畫可能並不總是按照縮放視口或讀取器模式的預(yù)期行為。可以將重要元素推出，從而導(dǎo)致視覺體驗令人震驚。

實際實施

為了增強對動畫潛在缺點的認識和考慮，我們可以主動合併媒體查詢，以使喜歡它的用戶或擁有無法平穩(wěn)處理的用戶禁用動畫。這是使用update媒體功能的較慢屏幕刷新速率的prefers-reduced-motion和設(shè)備的目標。

 @Media屏幕和
  （喜歡減少動作：減少），
  （更新：慢）{
  * {
    動畫效果：0.001ms！重要；
    動畫 - 識別計數(shù)：1！重要；
    過渡效果：0.001ms！重要；
  }
}

這迫使所有動畫都無法察覺地完成。它適用於請求減少運動或以緩慢刷新速率的設(shè)備（例如，E-INK屏幕）的用戶。保持animation-duration和transition-duration可確保功能，同時預(yù)防問題。

這種方法的目的是：

1. 提高對媒體功能的認識。
2. 鼓勵對動畫的影響進行周到的考慮。
3. 促進更可維護的樣式表。

動畫的價值

除了前庭障礙和光敏性外，還必須考慮認知障礙。世界衛(wèi)生組織估計，全世界有3億人受抑鬱癥的影響，這可能會嚴重損害與環(huán)境的互動。

動畫對某些認知障礙，協(xié)助理解和溝通可能是有益的。 Val Head的作品突出了其在減少認知負擔的同時改善解決問題，召回和技能的潛力。

減少，不要刪除

我們不應(yīng)該完全消除動畫。 prefers-reduced-motion表明減少，而不是去除。使用CSS Cascade，我們可以按每個組件管理動畫。如果動畫對理解至關(guān)重要，我們可以放慢速度以避免觸發(fā)問題。

CSS自定義屬性可以簡化此過程，甚至可以啟用網(wǎng)站範圍的動畫偏好小部件。

 / *默認持續(xù)時間 */
：根 {
   - 動物效果：250ms；
   - 轉(zhuǎn)變：250ms；
}

/ *上下文縮短 */
@Media（預(yù)先減少的動態(tài)：降低），（更新：慢）{
  ：根 {
     - 動物效果：0.001ms！重要；
     - 過渡 - 持續(xù)時間：0.001ms！重要；
  }
}

@Media（預(yù)先減少的動態(tài)：降低），（更新：慢）{
  * {
    動畫 - 武器：var（ - 動畫 - 武器）;
    動畫 - 識別計數(shù)：1！重要；
    過渡 - 持續(xù)時間：var（ - 動畫 - 持續(xù)時間）;
  }
}

/ *關(guān)鍵動畫的更新持續(xù)時間 */
@Media（預(yù)先降低動態(tài)：降低），（更新：快速）{
  .c教育概念{
     - 動物效果：6000ms！重要；
    動畫名稱：教育概念；
    動畫 - 武器：var（ - 動畫 - 武器）;
  }
}

測試動畫速度減慢需要對與運動相關(guān)的問題敏感的用戶輸入。一種更好的方法是收集有關(guān)過去觸發(fā)因素的信息，並將其與實現(xiàn)的動畫進行比較。

神經(jīng)差

Shell Little是一名可訪問性專家，提供了有關(guān)神經(jīng)疾病的寶貴見解：

Web動畫對某些神經(jīng)散熱器的用戶可能是有益的，但是相同的動畫可能是其他動畫的障礙。 WCAG的停頓，停止，隱藏指南有限，僅適用於超過5秒鐘的動畫並豁免基本運動。 prefers-reduced-motion提供了一個用戶控制的解決方案，使個人能夠決定顯示動畫的何時何地。這對於患有註意力有關(guān)的殘疾或感覺處理敏感性的用戶尤其重要。自動播放內(nèi)容是一個常見的挫敗感， prefers-reduced-motion可以解決這一問題。

結(jié)論

動畫應(yīng)負責任地使用。要考慮的因素包括：提高對潛在問題的認識，減輕法律風險，增強用戶體驗，了解設(shè)備功能和局限性以及尊重用戶數(shù)據(jù)和電池壽命。

傳播對prefers-reduced-motion和負責任的動畫實踐的認識至關(guān)重要。分享有問題動畫的經(jīng)驗可以幫助為開發(fā)人員建立寶貴的參考。這種集體努力可以使網(wǎng)絡(luò)更具包容性和可訪問每個人。

以上是恢復(fù)偏愛減少運動的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！