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

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

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

瀏覽器支持詳細(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 ，但其採(cǎi)用在CSS和可訪問(wèn)性社區(qū)之外仍然存在令人驚訝的限制。這並不完全出乎意料； CSS功能通常被低估了，甚至更高的可訪問(wèn)性。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這種方法的目的是：

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

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

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

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

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

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

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

 / *默認(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)畫(huà) - 武器：var（ - 動(dòng)畫(huà) - 武器）;
    動(dòng)畫(huà) - 識(shí)別計(jì)數(shù)：1！重要；
    過(guò)渡 - 持續(xù)時(shí)間：var（ - 動(dòng)畫(huà) - 持續(xù)時(shí)間）;
  }
}

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

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

神經(jīng)差

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

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

結(jié)論

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

傳播對(duì)prefers-reduced-motion和負(fù)責(zé)任的動(dòng)畫(huà)實(shí)踐的認(rèn)識(shí)至關(guān)重要。分享有問(wèn)題動(dòng)畫(huà)的經(jīng)驗(yàn)可以幫助為開(kāi)發(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)文章！