恢復偏愛減少運動

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

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

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

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

桌面瀏覽器支持

瀏覽器	支持
鉻合金	是的
Firefox	是的
IE	不
邊緣	否（但成為基於鉻的）
野生動物園	是的

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

瀏覽器	支持
Android Chrome	是的
Android Firefox	是的
Android（其他）	部分的
ios野生動物園	是的

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

提高意識

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

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

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

對受影響用戶的影響

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

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

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

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

評估潛在的傷害

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

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

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

動畫作為漸進式增強

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

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

實際實施

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

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

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

這種方法的目的是：

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

動畫的價值

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

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

減少，不要刪除

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

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

 / *默認持續時間 */
：根 {
   - 動物效果：250ms；
   - 轉變：250ms；
}

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

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

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

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

神經差

Shell Little是一名可訪問性專家，提供了有關神經疾病的寶貴見解：

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

結論

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

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

以上是恢復偏愛減少運動的詳細內容。更多資訊請關注PHP中文網其他相關文章！