アニメーションとモーション

車、ボート、飛行機に乗って、突然世界が回転したように感じたことはありませんか？片頭痛に悩まされて スマホやタブレットのアニメーションで 不意打ちに病気になってしまいましたあるいは、あらゆる動きに常に敏感な方もいるかもしれません。これらは前庭障害の様々な例です。

40 歳までに、成人の 35% 以上がなんらかの前庭機能不全を経験します。その結果、一時的なめまい、片頭痛に起因するめまい、より永続的な前膜障害を引き起こす可能性があります。

多くのユーザーは、めまいを引き起こすだけでなく、動いたり、まばたきしたり、スクロールしたりするコンテンツの気を散らします。ADHD などの注意欠陥障がいのある人は、アニメーション要素に気を取られて、そもそもウェブサイトやアプリにアクセスした理由を忘れてしまう可能性があります。

このモジュールでは

コンテンツの点滅と移動

アニメーションやモーションを作成する際は、要素の動きが過剰でないか確認しましょう。たとえば、光過敏性てんかんの患者は、色が暗から明にちらつく、または画面上ですばやく動くと、発作を引き起こす可能性があります。てんかんの患者の 3% が光過敏症を患っていると推定され、女性や若い人に多くみられます。

WCAG のフラッシュのガイドラインでは、次のことを推奨していません。

こうしたフラッシュは、せいぜいウェブページを使用できなくなる場合や、最悪の場合に病気につながる可能性があります。

極端な動きについては、光感受性てんかん分析ツール（PEAT）を使用してテストする必要があります。PEAT は、画面のコンテンツ、動画、アニメーションが発作を引き起こす可能性があるかどうかを判断するための無料のツールです。すべてのコンテンツを PEAT で評価する必要はありませんが、背景が明るい色と暗い色の間で点滅したり急に変化したりするコンテンツは、安全のために評価する必要があります。

アニメーションと動きについてもう 1 つの疑問点は、画面上のコンテンツやアクションを理解するうえで、要素の動きが不可欠かどうかということです。必須でない場合は、構築または設計する要素からすべての動き（マイクロ運動も含む）を削除することを検討してください。

要素の移動が必須ではないものの、ユーザーの全体的なエクスペリエンスを高める可能性がある場合や、別の理由で移動を削除できないとします。その場合は、WCAG のモーションに関するガイドラインに従ってください。ガイドラインでは、自動的に開始され、5 秒を超えて継続する、他のページ要素の一部である、重要でない移動、点滅、スクロールする要素について、ユーザーが移動を一時停止、停止、または非表示にできるオプションを構築する必要があると規定されています。

動きを一時停止、停止、非表示にする

ページに一時停止、停止、非表示のメカニズムを追加して、問題となる可能性のあるモーション アニメーションをユーザーがオフにできるようにします。これは画面レベルまたは要素レベルで行うことができます。

たとえば、デジタル商品に多くのアニメーションが含まれているとします。ユーザーがエクスペリエンスを制御できるように、アクセス可能な JavaScript の切り替えを追加することをご検討ください。ボタンを「モーションオフ」に切り替えると、その画面と他のすべてのアニメーションが固定されます。

メディアクエリを使用する

アニメーションを細かく選択し、ユーザーに動きの一時停止、停止、非表示の選択肢を提供し、アニメーションの無限ループを回避することに加えて、動きに焦点を当てたメディアクエリを追加することも検討してください。これにより、ユーザーは画面に表示するものをより細かく選択できるようになります。

@prefers-reduced-motion

カラー モジュールの色に焦点を当てたメディアクエリと同様に、@prefers-reduced-motion メディアクエリでもアニメーションに関連するユーザーの OS 設定を確認します。

[モーションの低減] がオンになっている MacOS ディスプレイの設定 UI。

動きを減らすために、ディスプレイの設定を指定できます。これらの設定はオペレーティング システムによって異なりますが、肯定的なものと否定的なものがあります。@prefers-reduced-motion を使用すると、これらの設定を遵守するサイトを設計できます。

対応ブラウザ

  • 74
  • 79
  • 63
  • 10.1

ソース

macOS と Android では、ユーザーはこの設定をオンにすると、手の動きを軽減できます。macOS の場合、[設定] > [ユーザー補助] > [ディスプレイ] で [モーションの軽減] を設定できます。Android の設定は、[アニメーションを削除] です。Windows では、この設定は [アニメーションを表示] として正にフレーム化され、デフォルトでオンになっています。動きを減らすには、ユーザーがこの設定をオフにする必要があります。

または、次の例に示すように、無限ループで再生するのではなく、5 秒以内に移動を停止するようにすべてのアニメーションをコーディングすることもできます。

動きを漸進型のエンハンスメントで

デザイナーやデベロッパーは、デフォルトの動きの状態や表示する動きの量など、多くの選択肢があります。モーションに関する最後の例をもう一度見てみましょう。

画面上のコンテンツを理解するうえで、アニメーションは不要であるとします。この場合は、デフォルトの状態を、完全なモーション バージョンではなく、モーション モーションの軽減アニメーションに設定することができます。ユーザーが明確にアニメーションをリクエストしない限り、アニメーションはオフになります。

発作、前庭、その他の視覚障害のある方の場合、どの運動のレベルで問題が生じるかは予測できません。画面上でわずかな動きでも、めまいや目のかすみ、さらに悪化を引き起こすことがあります。そのため、次の例では、デフォルトでアニメーションなしに設定しています。

階層化されたメディアクエリ

複数のメディアクエリを使用して、ユーザーにより多くの選択肢を提供できます。@prefers-color-scheme、@prefers-contrast、@prefers-reduced-motion をすべて一緒に使用しましょう。

ユーザーによる選択を許可

Google のデジタル サービスにアニメーションを組み込むことは、ユーザーを喜ばせるために楽しいものです。ただし、こうしたデザインの影響を受ける方もいらっしゃることを覚えておいてください。軽度の不快感から、弱体的な病気や発作など、動体過敏症は誰にでも起こりえます。

さまざまなツールを使用して、ユーザーはどのくらいの動きが大きすぎるか推測せずに、自分にとって最適なものを判断できます。たとえば、サイトやウェブアプリ内のアニメーションのオンとオフを切り替える切り替えボタンを追加します。このような切り替えボタンを、デフォルトでオフに設定することを検討してください。

理解度チェック

モーションとアニメーションのユーザー補助機能に関する知識をテストします。

モーションに関するオペレーティング システムの設定を反映したものをどのように構築すればよいでしょうか。

@prefers-reduced-motion
オーバープロビジョニングとこのメディアクエリでは、ユーザーのディスプレイ設定に基づいて、使用するモーションの量を決定できます。これらの設定はオペレーティング システムによって異なるため、このメディアクエリに加えてモーションの選択肢を実装することをご検討ください。
JavaScript の切り替え
まだ続きます。切り替えボタンを使用すると、ユーザーはウェブサイトにアクセスした後に選択できるようになりますが、ユーザーの設定を読み取ることはできません。