2年前、私はSafari 10.1で導(dǎo)入されたメディアクエリでprefers-reduced-motionを調(diào)査し、前庭障害とてんかんのユーザーのWebアクセシビリティを改善しました。元の記事では、動(dòng)き誘発性の問(wèn)題を防ぐためのクエリの背景、必要性、および実裝について説明しました。

これは、ユーザークエリに関するOrde Saundersの優(yōu)れた作品と、Webアニメーションのモーション感度に関するVal Headの洞察に続きました。

2019年に早送りすると、主要なデスクトップブラウザがこの重要な機(jī)能をサポートするようになりました。 Safariが先導(dǎo)し、Firefoxが密接に続きました。 Chromeは後に參加し、バージョン74からサポートを開(kāi)始しました。

ブラウザのサポートの詳細(xì)は、caniuse.comで入手できます（數(shù)字はそのバージョン以降のサポートを示しています）。

デスクトップブラウザのサポート

モバイル/タブレットブラウザのサポート

Microsoft Edgeには現(xiàn)在サポートがありませんが、Chromeとの統(tǒng)合は差し迫っています。この遷移は、潛在的な利點(diǎn)を提供します。Edgeの強(qiáng)力なアクセシビリティ機(jī)能がChromeに組み込まれる可能性があります。

意識(shí)を高める

一部のWebサイトやアプリはprefers-reduced-motionを利用していますが、その採(cǎi)用はCSSおよびアクセシビリティコミュニティの外で驚くほど制限されています。これは完全に予想外ではありません。多くの場(chǎng)合、CSS機(jī)能は過(guò)小評(píng)価されており、アクセシビリティがさらに過(guò)小評(píng)価されています。

開(kāi)発者は、特にペースの速い業(yè)界では、比較的新しい機(jī)能を見(jiàn)落とす可能性があることは理解できます。市場(chǎng)の優(yōu)先順位は、開(kāi)発者の焦點(diǎn)に大きな影響を與えます。ただし、 prefers-reduced-motion 、OSレベルの設(shè)定と統(tǒng)合されており、長(zhǎng)期的な関連性を示唆しています。

その真の価値は、リクルーターを感動(dòng)させることではなく、影響を受けるユーザーの生活を向上させることです。このシンプルなメディアクエリは、ユーザーがWebサイトを閲覧したり対話したりするだけで大??きな不快感を防ぐことができます。

影響を受けるユーザーへの影響

障害は複雑で多面的であり、幅広い恒久的、一時(shí)的、環(huán)境的、狀況的要因を網(wǎng)羅しています。多くの人々は、視覚障害のみに誤って焦點(diǎn)を合わせています。障害の影響は大きく異なり、ある人が別の人に害を及ぼす可能性があります。

前庭障害、片頭痛、または発作トリガーの個(gè)人にとって、ウェブブラウジングは困難な場(chǎng)合があります。予期しないアニメーションは、衰弱させる癥狀を引き起こす可能性があります。これは、Webアプリケーションに仕事が大きく依存している人にとって特に問(wèn)題があります。彼らは彼らの作業(yè)デバイスやジョブオプションを制御できない場(chǎng)合があります。

誰(shuí)もが自分の狀態(tài)やそのトリガーを知っているという誤解です。最初のトリガーイベントは、感度を高めることがあります。 Facundo Corradiniの記事「前庭障害のアクセシビリテ?！工?、この経験を雄弁に説明しています。

さらに、すべての支援技術(shù)ユーザーが技術(shù)に精通しているわけではありません。それらは、モーションを緩和するOS設(shè)定またはブラウザ拡張機(jī)能を認(rèn)識(shí)していない場(chǎng)合があります。ロックダウンされたコーポレートデバイス、デバイスの機(jī)能に不慣れなユーザー、または安価なprefers-reduced-motionをサポートできない安価または古いデバイスを使用しているユーザーを検討してください。

潛在的な害の評(píng)価

エンゲージメントを促進(jìn)することを目的としたアニメーションは、逆にユーザーを追い払うことができます。定量化するのは困難ですが、このマイナスの影響は現(xiàn)実です。意図的な危害は測(cè)定が容易ですが、それに対処することはさらなる課題を提示します。

かなりのユーザーベースへの大きな害は、ブランディングに影響します。過(guò)度に実裝されていないアニメーションは、理由を明確にすることができなくても、ユーザーを阻止できます。

すべてのユーザーの特定の狀況を知ることはできません。積極的で思いやりのあるアプローチが不可欠です。

進(jìn)歩的な強(qiáng)化としてのアニメーション

すべてのデバイスがアニメーションを均等にレンダリングするわけではありません。低電力デバイスは苦労する可能性があり、特殊なブラウジングモード（リーダーモードなど）はアニメーションを完全に変更または削除する場(chǎng)合があります。これは、堅(jiān)牢なデザインの重要性を強(qiáng)調(diào)しています。

アニメーションは、ズームされたビューポートまたはリーダーモードで意図されているように、常に動(dòng)作するとは限りません。重要な要素は視界から引き出され、視覚的な體験が不快になる可能性があります。

実用的な実裝

アニメーションの潛在的な欠點(diǎn)に対する認(rèn)識(shí)と考慮を高めるために、メディアクエリを積極的に組み込んで、それを好むか、スムーズに処理できないデバイスを持っているユーザーのアニメーションを無(wú)効にすることができます。これは、 updateメディア機(jī)能を使用して畫(huà)面更新率が遅いデバイスprefers-reduced-motionを目標(biāo)としています。

 @media畫(huà)面と
  （還元運(yùn)動(dòng)を好む：削減）、
  （更新：遅い）{
  * {
    アニメーション期間：0.001ms！重要。
    Animation-Iteration-Count：1！重要;
    遷移期間：0.001ms！重要。
  }
}

これにより、すべてのアニメーションが當(dāng)然のことながら完了するようになります。リフレッシュレートが遅いモーションまたはデバイスの削減を要求するユーザーに機(jī)能します（たとえば、E-ink畫(huà)面）。 animation-durationとtransition-durationを維持することで、問(wèn)題を防ぎながら機(jī)能性が保証されます。

このアプローチは、次のことを目指しています。

1. メディア機(jī)能の認(rèn)識(shí)を高めます。
2. アニメーションの影響について思慮深い考慮を促します。
3. より保守可能なスタイルシートを宣伝します。

アニメーションの価値

前庭障害や光過(guò)敏癥を超えて、認(rèn)知障害を考慮する必要があります。世界保健機(jī)関は、世界中の3億人がうつ病の影響を受けていると推定しており、環(huán)境との相互作用を著しく損なう可能性があります。

アニメーションは、いくつかの認(rèn)知障害にとって有益であり、理解とコミュニケーションを支援します。 Val Headの研究は、認(rèn)知負(fù)荷を削減しながら、問(wèn)題解決、リコール、スキルの獲得を改善する可能性を強(qiáng)調(diào)しています。

削減して、削除しないでください

アニメーションを完全に排除すべきではありません。 prefers-reduced-motion 、除去ではなく減少を示唆しています。 CSSカスケードを使用して、コンポーネントごとにアニメーションを管理できます。アニメーションが理解するために重要な場(chǎng)合、問(wèn)題のトリガーを避けるためにそれを遅くすることができます。

CSSカスタムプロパティは、このプロセスを合理化することができ、サイト全體のアニメーション設(shè)定ウィジェットを有効にすることもできます。

 / *デフォルト期間 */
：根 {
   - アニメーション期間：250ms;
   - 貿(mào)易期間：250ms;
}

/ *コンテキスト短縮 */
@media（redureced-motion：reduce）、（update：sell）{
  ：根 {
     - アニメーション期間：0.001ms！重要。
     - 貿(mào)易期間：0.001ms！重要;
  }
}

@media（redureced-motion：reduce）、（update：sell）{
  * {
    アニメーションデュレーション：var（ - アニメーションデュレーション）;
    Animation-Iteration-Count：1！重要;
    遷移期間：var（ - アニメーションデュレーション）;
  }
}

/ *重要なアニメーションの期間を更新 */
@media（reduced-motion：reduce）、（update：fast）{
  .c-educational Concept {
     - アニメーション期間：6000ms！重要。
    アニメーション名：教育概念;
    アニメーションデュレーション：var（ - アニメーションデュレーション）;
  }
}

アニメーションの遅延をテストするには、モーション関連の問(wèn)題を受けやすいユーザーからの入力が必要です。より良いアプローチは、過(guò)去のトリガーに関する情報(bào)を収集し、それらを?qū)g裝されたアニメーションと比較することです。

NeuroDivergence

アクセシビリティスペシャリストであるシェルリトルは、神経質(zhì)性に関する貴重な洞察を提供します。

Webアニメーションは、一部のNeurodivergentユーザーにとって有益ですが、同じアニメーションが他の人にとっては障壁になる可能性があります。 WCAGの一時(shí)停止、停止、非表示ガイドラインは限られており、5秒より長(zhǎng)いアニメーションにのみ適用され、本質(zhì)的な動(dòng)きを免除します。 prefers-reduced-motionは、ユーザーが制御するソリューションを提供し、個(gè)人がアニメーションがいつ、どこに表示されるかを決定できるようにします。これは、注意関連の障害や感覚処理の感度を持つユーザーにとって特に重要です。自動(dòng)展開(kāi)コンテンツは一般的なフラストレーションであり、 prefers-reduced-motion可能性があります。

結(jié)論

アニメーションは責(zé)任を持って使用する必要があります。考慮すべき要因には、潛在的な問(wèn)題の認(rèn)識(shí)を高め、法的リスクの緩和、ユーザーエクスペリエンスの向上、デバイスの能力と制限の理解、ユーザーデータとバッテリー壽命の尊重が含まれます。

prefers-reduced-motionと責(zé)任あるアニメーションプラクティスの認(rèn)識(shí)を広めることが重要です。問(wèn)題のあるアニメーションの経験を共有することは、開(kāi)発者にとって貴重なリファレンスを構(gòu)築するのに役立ちます。この集合的な努力は、すべての人にとってウェブをより包括的でアクセスしやすくすることができます。

以上が再び還元運(yùn)動(dòng)を好むの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。