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

車、ボート、飛行機に乗っているときに、突然世界が回っているように感じたことはありますか？または、スマートフォンやタブレットのアニメーションが、あなたを「楽しませる」ために作成されたにもかかわらず、突然気分が悪くなったことはありませんか？あるいは、あらゆる種類の動きに常に敏感であるかもしれません。これらは、さまざまな種類の平衡障害の例です。

40 歳までに、成人の 35% 以上がなんらかの前庭機能障害を経験します。一時的なめまい、片頭痛による回転性めまい、より永続的な前庭機能障害につながる可能性があります。

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

このモジュールでは、あらゆる種類の動作誘発性疾患を抱える人々をより適切にサポートする方法について説明します。

点滅するコンテンツ、動くコンテンツ

アニメーションやモーションを構築する際は、要素の動きが過剰かどうかを自問自答します。たとえば、色が暗いところから明るいところへちらついたり、画面上で動きが速かったりすると、光過敏性発作の罹患者に発作が起こることがあります。てんかん患者の 3% が光過敏症を患っていると推定されており、女性や若年層に多く見られます。

WCAG の点滅に関するガイドラインでは、次のことを推奨していません。

• 1 秒間に 3 回以上点滅する
• 一般的なフラッシュと赤色フラッシュのしきい値を下回るフラッシュ。

これらの点滅は、最悪の場合、ウェブページを使用できなくなるだけでなく、病気を引き起こす可能性もあります。

極端な動きについては、光過敏性てんかん分析ツール（PEAT）を使用してテストすることが不可欠です。PEAT は、画面のコンテンツ、動画、アニメーションが発作を引き起こす可能性があるかどうかを特定するための無料ツールです。すべてのコンテンツを PEAT で評価する必要はありませんが、背景色の明暗が点滅したり、急速に切り替わったりするコンテンツは、念のため評価する必要があります。

アニメーションとモーションについて考えるべきもう 1 つの点は、画面上のコンテンツやアクションを理解するうえで、要素の動きが不可欠かどうかです。必須でない場合は、作成または設計する要素から、微細な動きも含めてすべての動きを削除することを検討してください。

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

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

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

たとえば、デジタル プロダクトに多くのアニメーションが含まれているとします。ユーザーがエクスペリエンスを制御できるように、アクセシビリティ対応の JavaScript 切り替えを追加することを検討してください。ボタンを [モーション オフ] に切り替えると、その画面と他のすべての画面のアニメーションがフリーズします。

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

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

@prefers-reduced-motion

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

ユーザーは、モーションを減らすように表示設定を行うことができます。これらの設定はオペレーティング システムによって異なり、肯定的な表現または否定的な表現で示されることがあります。@prefers-reduced-motion を使用すると、これらの設定を尊重するサイトを設計できます。

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

動きに困難を感じるユーザーのアクセシビリティを確保するため、WCAG 2.0 AA ガイドラインで定められた 5 秒のしきい値よりも短いアニメーションであっても、慎重に扱う必要があります。最も信頼できる方法は、動きの軽減を希望するユーザーにアニメーションを専用のコントロールで操作できるようにすることです。たとえば、再生ボタンと一時停止ボタンなどの専用のコントロールを使用して、アニメーションの開始と停止をユーザーが制御できるようにします。

動きのプログレッシブ エンハンスメント

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

画面上のコンテンツを理解するうえでアニメーションは不要であると判断されたとします。その場合は、デフォルトの状態をフルモーション バージョンではなく、モーション軽減アニメーションに設定できます。ユーザーがアニメーションを明示的に要求しない限り、アニメーションはオフになります。

発作、前庭障害、その他の視覚障害のある人に問題を引き起こす動きのレベルを予測することはできません。画面上のわずかな動きでも、めまいや視力低下を引き起こすことがあります。したがって、次の例では、デフォルトでアニメーションなしになります。

レイヤード メディアクエリ

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

ユーザーが選択できるようにする

デジタル プロダクトにアニメーションを組み込んでユーザーを喜ばせるのは楽しいことですが、一部のユーザーはこうしたデザインの影響を受けることを忘れてはなりません。モーション センシティブは、軽度の不快感から、衰弱性の病気や発作を引き起こすまで、誰にでも影響を与える可能性があります。

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