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

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

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

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

桌面瀏覽器支持

移動(dòng)/平板電腦瀏覽器支持

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

提高意識(shí)

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

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

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

對(duì)受影響用戶的影響

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

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

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

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

評(píng)估潛在的傷害

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

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

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

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

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

動(dòng)畫可能并不總是按照縮放視口或讀取器模式的預(yù)期行為?？梢詫⒅匾赝瞥?，從而導(dǎo)致視覺(jué)體驗(yàn)令人震驚。

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

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

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

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

這種方法的目的是：

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

動(dòng)畫的價(jià)值

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

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

減少，不要?jiǎng)h除

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

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

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

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

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

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

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

神經(jīng)差

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

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

結(jié)論

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

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

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