ユーザーのモーション設定の尊重

Webでモーションを操作するときは、すべての人が同じようにモーションを体験するわけではないことを考慮することが重要です。 一部の人にとって滑らかで滑らかに感じるかもしれないものは、他の人にとって迷惑または気を散らす可能性があります。さらに悪いことに、病気の感覚を誘発したり、発作を引き起こしたりすることさえあります。 動きの多いウェブサイトは、モバイルデバイスのバッテリー寿命に大きな影響を与えたり、より多くのデータを使用したりする可能性があります（たとえば、動画の自動再生では、静止画像よりも多くのユーザーのデータが必要になります）。 これらは、動きの多いサイトがすべての人にとって望ましくない可能性がある理由のほんの一部です。

ほとんどの新しいオペレーティングシステムでは、ユーザーはシステムレベルの設定でモーションプリファレンスを設定できます。 prefers-reduced-motionメディアクエリ（レベル5メディアクエリ仕様の一部）を使用すると、ユーザーのシステムレベルのモーション設定を検出し、それを尊重するCSSスタイルを適用できます。

prefers-reduced-motionの2つのオプションはreduceまたはno-preferenceです。 ユーザーがモーションの削減を明示的に設定している場合は、CSSで次のように使用して、要素のアニメーションをオフにすることができます。

 .some-element { animation: bounce 1200ms; } @media (prefers-reduced-motion: reduce) { .some-element { animation: none; } }

逆に、ユーザーにモーション設定がない場合にのみアニメーションを設定できます。 これには、作成する必要のあるコードの量を減らすという利点があり、ユーザーのモーション設定に対応することを忘れる可能性が低くなります。

 @media (prefers-reduced-motion: no-preference) { .some-element { animation: bounce 1200ms; } }

追加の利点は、 prefers-reduced-motionをサポートしていない古いブラウザはルールを無視し、元のモーションのない要素のみを表示することです。

どのルール？

多かれ少なかれ確立されたコンセンサスがモバイルファーストである（したがって、 min-width min-widthおよびmax-widthメディアクエリとは異なり、動きの少ないスタイルを作成するための単一の「正しい」方法はありません。 上記の理由から、私は2番目の例（ prefers-reduced-motion: no-preferenceがtrueと評価される場合にのみアニメーションを適用する）を好む傾向があります。 Tatiana Macは、開発者が採用を検討する可能性のあるいくつかのアプローチと、Web上でモーションを使用して設計するときに尋ねる重要な質問を含む他の多くの優れたポイントをカバーするこの優れた記事を書きました。

いつものように、チームのコミュニケーションと一貫した戦略は、Webアクセシビリティに関してすべての基盤を確実にカバーするための鍵です。

実用的使用：スクロール動作にprefers-reduced-motionを適用する

prefers-reduced-motionには、キーフレームアニメーションまたはトランジションを適用する（または適用しない）以外にも多くのアプリケーションがあります。 一例はスムーズなスクロールです。 html要素でscroll-behaviour: smoothを設定した場合、ユーザーがページ内のアンカーリンクをクリックすると、ページ上の適切な位置にスムーズにスクロールされます（現在Safariではサポートされていません）。

 html { scroll-behavior: smooth; }

残念ながら、CSSでは、現時点ではその動作をあまり制御できません。 コンテンツのページが長い場合、ページは非常に速くスクロールします。これは、動きに敏感な人にとってはかなり不快な体験になる可能性があります。 メディアクエリでラップすることにより、ユーザーがreduced-motionた設定をしている場合に、その動作が適用されないようにすることができます。

 @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

Javascriptでのモーション設定のケータリング

CSSではなくJavaScriptでモーションを適用する必要がある場合があります。 同様に、 matchMediaを使用して、JSでユーザーのモーション設定を検出できます。 JSコードでスムーズなスクロール動作を条件付きで実装する方法を見てみましょう。

 /* Set the media query */ const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)') button.addEventListener('click', () => { /* If the media query matches, set scroll behavior variable to 'auto', otherwise set it to 'smooth' */ const behavior = prefersReducedMotion.matches ? 'auto' : 'smooth' /* When the button is clicked, the user will be scrolled to the top */ window.scrollTo({ x: 0, y: 0, behavior }) })

同じ原理を使用して、JSライブラリを使用してモーションリッチなUIを実装するかどうか、またはライブラリ自体をロードするかどうかを検出できます。

次のコードスニペットでは、ユーザーがモーションの削減を希望する場合、関数は早期に戻り、大きな依存関係の不要なインポートを回避します。これは、ユーザーのパフォーマンスを向上させます。 モーションプリファレンスが設定されていない場合は、Greensockアニメーションライブラリを動的にインポートして、アニメーションを初期化できます。

 const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)') const loadGSAPAndInitAnimations = () => { /* If user prefers reduced motion, do nothing */ if (prefersReducedMotion.matches) return /* Otherwise, import the GSAP module and initialize animations */ import('gsap').then((object) => { const gsap = object.default /* Initialize animations with GSAP here */ }) } loadGSAPAndInitAnimations()

reduced-motionがないことを意味しません

動きの好みを減らすためにスタイリングするときは、アクションが発生したときの意味のあるアクセス可能なインジケーターをユーザーに提供することが重要です。 たとえば、動きを抑えたいユーザーの気を散らす、または動きの激しいホバー状態をオフにする場合、ユーザーが要素にホバーしているときの明確な代替スタイルを提供するように注意する必要があります。

次のデモは、モーションプリファレンスが設定されていない場合に、ユーザーがギャラリーアイテムにカーソルを合わせたり、フォーカスしたりしたときの複雑な遷移を示しています。 彼らが動きを減らすことを好む場合、遷移はより微妙ですが、それでもホバー状態を明確に示します。

モーションの減少は、必ずしもWebページからすべての変換を削除することを意味するわけではありません。 たとえば、ホバー時に数ピクセル移動する小さな矢印アイコンのあるボタンは、動きの少ない体験を好む人にとって問題を引き起こす可能性は低く、色だけよりも状態の変化のより有用な指標を提供します。

開発者が次のように縮小モーションスタイルを適用しているのを時々目にします。これにより、すべての要素のすべてのトランジションとアニメーションが削除されます。

 @media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

これは、ユーザーのモーションプリファレンスを無視するよりも間違いなく優れていますが、必要に応じて要素を簡単に調整して、より微妙なトランジションを提供することはできません。

次のコードスニペットには、ホバーするとスケールが大きくなるボタンがあります。 色とスケールを移行していますが、モーションを減らすことを好むユーザーは、移行をまったく受けません。

 button { background-color: hotpink; transition: color 300ms, background-color 300ms, transform 500ms cubic-bezier(.44, .23, .47, 1.27); } button:hover, button:focus { background-color: darkviolet; color: white; transform: scale(1.2); } @media screen and (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } button { /* Even though we would still like to transition the colors of our button, the following rule will have no effect */ transition: color 200ms, background-color 200ms; } button:hover, button:focus { /* Preventing the button scaling on hover */ transform: scale(1); } }

このデモをチェックして、効果を確認してください。 トランジションのない突然のカラースイッチは、数百ミリ秒のトランジションよりも不快に感じる可能性があるため、これはおそらく理想的ではありません。 これが、全体として、私が一般的にケースバイケースで動きを減らすようにスタイリングすることを好む理由の1つです。

興味があれば、これは必要に応じてトランジションをカスタマイズできるようにリファクタリングされた同じデモです。 遷移期間にカスタムプロパティを使用するため、宣言全体を書き直すことなく、スケール遷移のオンとオフを切り替えることができます。

アニメーションを削除する方が良い場合

Eric Baileyは、彼の記事「Revisiting prioritys-reduced-motion、reduced motion media query」で、「Webにアクセスできるすべてのデバイスがアニメーションをレンダリングしたり、アニメーションをスムーズにレンダリングしたりできるわけではない」と指摘しています。 リフレッシュレートが低く、アニメーションがぎくしゃくする可能性があるデバイスの場合、実際にはアニメーションを削除することをお勧めします。 メディアのupdate機能を使用して、これを判別できます。

 @media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }

エリックはアクセシビリティの分野で一流の人物であるため、エリックの推奨事項については記事全体を必ずお読みください。

すべての部分の合計

コンポーネントレベルのCSSに非常に厳密に焦点を合わせる場合は、ページ全体のデザインを覚えておくことが重要です。 コンポーネントレベルでかなり無害に見えるアニメーションは、ページ全体で繰り返されると、はるかに大きな影響を与える可能性があり、多くの可動部分の1つです。

Tatianaの記事では、アニメーションを（ prefers-reduced-motionを使用して）単一のCSSファイルに編成することを提案しています。このファイルは、 (prefers-reduced-motion: no-preference)がtrueと評価された場合にのみロードできます。 すべてのアニメーションの合計を見ると、サイト全体を訪問した経験を視覚化し、それに応じて動きの少ないスタイルを調整するのに役立つという追加の利点があります。

明示的なモーショントグル

prefers-reduced-motionは便利ですが、システム設定の機能を認識しているユーザーにのみ対応できるという欠点があります。 多くのユーザーはこの設定の知識が不足していますが、他のユーザーはシステムレベルの設定にアクセスせずに借用したコンピューターを使用している可能性があります。 それでも、他の人は大多数のサイトの動きに満足しているかもしれませんが、動きを多用しているサイトは耐え難いです。

1つのサイトにアクセスするためだけに、システム環境設定を調整しなければならないのは面倒な場合があります。 これらの理由から、場合によっては、モーションのオンとオフを切り替えるために、サイト自体に明示的なコントロールを提供することが望ましい場合があります。 これはJSで実装できます。

次のデモでは、背景の周りを漂ういくつかの円があります。 初期のアニメーションスタイルは、ユーザーのシステム設定（ prefers-reduced-motion使用）によって決定されますが、ユーザーはボタンを使用してモーションのオンとオフを切り替えることができます。 これにより、 bodyにクラスが追加され、選択した設定に応じてスタイルを設定するために使用できます。 ボーナスとして、モーション設定の選択もローカルストレージに保持されるため、ユーザーが次にアクセスしたときに「記憶」されます。

カスタムプロパティ

デモの機能の1つは、トグルがカスタムプロパティ--playStateを設定することです。これを使用して、アニメーションを再生または一時停止できます。 これは、一度に多数のアニメーションを一時停止または再生する必要がある場合に特に便利です。 まず、再生状態をpausedに設定します。

 .circle { animation-play-state: var(--playState, paused); }

ユーザーがシステム設定でモーションを減らす設定を設定している場合は、再生状態をrunning中に設定できます。

 @media (prefers-reduced-motion: no-preference) { body { --playState: running; } }

注：これを個々の要素ではなくbodyに設定すると、カスタムプロパティを継承できるようになります。

ユーザーがトグルをクリックすると、 bodyのカスタムプロパティが更新され、それが使用されるすべてのインスタンスがトグルされます。

 // This will pause all animations that use the `--playState` custom property document.body.style.setProperty('--playState', 'paused')

これはすべての場合に理想的な解決策ではないかもしれませんが、1つの利点は、ユーザーがトグルをクリックするとアニメーションが一時停止するだけで、初期状態に戻るのではなく、非常に不快感を与える可能性があることです。

トグルのアクセシビリティを改善するための彼の推薦に対してスコットオハラに特に感謝します。 彼は、一部のスクリーンリーダーが更新されたボタンテキストをアナウンスしないことを認識しました。これはユーザーがボタンをクリックすると変更され、代わりにボタンのrole="switch"を提案し、クリックするとaria-checked onまたはoffに切り替わります。

ビデオコンポーネント

場合によっては、コンポーネントレベルでモーションを切り替える方がよい場合があります。 自動再生ビデオの背景を持つWebページを取得します。 モーションを減らしたいユーザーには動画が自動再生されないようにする必要がありますが、ユーザーが選択した場合にのみ動画を再生する方法を提供する必要があります。 （動画の自動再生を完全に停止することは避けるべきだと主張する人もいるかもしれませんが、必ずしもその戦いに勝つとは限りません！）同様に、動画がユーザーの自動再生に設定されている場合は、ユーザーに次の方法を提供する必要があります。ビデオを一時停止します。

このデモは、ユーザーがモーション設定を指定していない場合に自動再生属性を設定する方法を示しています。カスタムの再生/一時停止ボタンを実装して、設定に関係なく再生を切り替えることもできます。

（その後、Scott O'Haraによるこの投稿に出くわし、この正確な使用例を詳しく説明しました。）

<picture>要素の使用

Chris Coyierは、ユーザーのモーション設定に応じてさまざまなメディアソースをロードするために、いくつかの手法を組み合わせた興味深い記事を作成しました。 これはかなりクールです。モーションを減らしたいユーザーにとっては、はるかに大きなGIFファイルもダウンロードされないということです。 私が見る限り、欠点は、ファイルがダウンロードされると、ユーザーがモーションフリーの代替手段に切り替える方法がないことです。

このオプションを追加したデモの修正バージョンを作成します。 （システム環境設定でreduced-motionを確認します。）残念ながら、Chromeでアニメーションとモーションのないオプションを切り替えると、毎回GIFファイルが新たにダウンロードされるように見えますが、これはそうではありません。他のブラウザ：

それでも、この手法はGIFを表示するためのより敬意のある方法のように思われ、ユーザーの不満の原因となる可能性があります。

ブラウザのサポートと最終的な考え

prefers-reduced-motionは、数年前にさかのぼるすべての最新のブラウザで優れたサポートを提供します。 これまで見てきたように、モーションを減らした最初のアプローチを採用することで、サポートされていないブラウザはreduced-motionたフォールバックを取得するだけです。 あなたのサイトをよりアクセスしやすくするために今日それを使わない理由はありません。

カスタムトグルには間違いなく場所があり、この設定やその機能を知らないユーザーのエクスペリエンスを大幅に向上させることができます。 ユーザーにとっての欠点は一貫性がないことです。すべての開発者が独自のソリューションを考え出すことを余儀なくされた場合、ユーザーはすべてのWebサイトの異なる場所でモーショントグルを探す必要があります。

ここで欠けているレイヤーはブラウザのようです。 ブラウザreduced-motionトグルを実装し、ユーザーが簡単にアクセスできる場所に配置して、閲覧しているサイトに関係なく、どこにあるかがわかるようにしたいと思います。 開発者がモーションのアクセシビリティを確保するためにより多くの時間を費やすことも奨励されるかもしれません。

関連リソース

• レベル5メディアクエリ仕様、World Wide Webコンソーシアム（W3C）
• prefers-reduced-motion 、MDN Web Docs、Mozilla
• モーション感度、Val Head、SmashingMagazineのモーションを減らしたデザイン
• 動きのないアニメーションへの最初のアプローチ、Tatiana Mac
• 縮小映画テクニック、テイク2、クリスコイエ、CSS-トリック
• 好みを再考する-reduced prefers-reduced-motion 、The Reduced Motion Media Query、Eric Bailey、CSS-Tricks
• アクセシビリティを向上させるためのモーションの削減、Lindsey Kopacz