再び還元運動を好む

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

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

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

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

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

ブラウザ	サポート
クロム	はい
Firefox	はい
すなわち	いいえ
角	いいえ（ただし、クロムベースになる）
サファリ	はい

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

ブラウザ	サポート
Android Chrome	はい
Android Firefox	はい
Android（その他）	部分的
iOSサファリ	はい

Microsoft Edgeには現在サポートがありませんが、Chromeとの統合は差し迫っています。この遷移は、潜在的な利点を提供します。Edgeの強力なアクセシビリティ機能がChromeに組み込まれる可能性があります。

意識を高める

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

開発者は、特にペースの速い業界では、比較的新しい機能を見落とす可能性があることは理解できます。市場の優先順位は、開発者の焦点に大きな影響を与えます。ただし、 prefers-reduced-motion 、OSレベルの設定と統合されており、長期的な関連性を示唆しています。

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

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

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

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

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

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

潜在的な害の評価

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

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

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

進歩的な強化としてのアニメーション

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

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

実用的な実装

アニメーションの潜在的な欠点に対する認識と考慮を高めるために、メディアクエリを積極的に組み込んで、それを好むか、スムーズに処理できないデバイスを持っているユーザーのアニメーションを無効にすることができます。これは、 updateメディア機能を使用して画面更新率が遅いデバイスprefers-reduced-motionを目標としています。

 @media画面と
  （還元運動を好む：削減）、
  （更新：遅い）{
  * {
    アニメーション期間：0.001ms！重要。
    Animation-Iteration-Count：1！重要;
    遷移期間：0.001ms！重要。
  }
}

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

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

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

アニメーションの価値

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

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

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

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

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

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

/ *コンテキスト短縮 */
@media（redureced-motion：reduce）、（update：sell）{
  ：根 {
     - アニメーション期間：0.001ms！重要。
     - 貿易期間：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（ - アニメーションデュレーション）;
  }
}

アニメーションの遅延をテストするには、モーション関連の問題を受けやすいユーザーからの入力が必要です。より良いアプローチは、過去のトリガーに関する情報を収集し、それらを実装されたアニメーションと比較することです。

NeuroDivergence

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

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

結論

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

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

以上が再び還元運動を好むの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。