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

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

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

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

桌面瀏覽器支持

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

盡管Microsoft Edge當(dāng)前缺乏支持，但它與Chrome的集成屬于即將進(jìn)行。這種過渡提供了潛在的上行空間：Edge的強(qiáng)大可訪問性功能可能包含在Chrome中。

提高意識

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

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

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

對受影響用戶的影響

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

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

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

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

評估潛在的傷害

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

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

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

動畫作為漸進(jìn)式增強(qiáng)

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

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

實(shí)際實(shí)施

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

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

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

這種方法的目的是：

1. 提高對媒體功能的認(rèn)識。
2. 鼓勵對動畫的影響進(jìn)行周到的考慮。
3. 促進(jìn)更可維護(hù)的樣式表。

動畫的價值

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

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

減少，不要刪除

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

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

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

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

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

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

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

神經(jīng)差

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

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

結(jié)論

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

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

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