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

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

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

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

このモジュールでは、あらゆる種類の動きに起因する障害のある人々をより適切にサポートするための方法をいくつか紹介します。

コンテンツのフラッシュと移動

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

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

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

このような点滅は、最善の場合でもウェブページを使用できなくなる可能性があり、最悪の場合、病気につながる可能性があります。

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

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

要素の動きが必須ではないが、ユーザーの全体的なエクスペリエンスを向上させる可能性がある場合や、別の理由で動きを削除できない場合を考えてみましょう。その場合は、WCAG の動きに関するガイドラインに従う必要があります。ガイドラインでは、自動的に開始され、5 秒以上続く、他のページ要素の一部である、不要な移動、点滅、スクロールの要素に対して、ユーザーが動きを一時停止、停止、非表示にできるオプションを構築することが義務付けられています。

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

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

たとえば、デジタル プロダクトに多くのアニメーションが含まれているとします。ユーザーが操作できるように、ユーザー補助対応の JavaScript 切り替えボタンを追加することを検討してください。ボタンを [モーションなし] に切り替えると、その画面と他のすべての画面ですべてのアニメーションが停止します。

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

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

@prefers-reduced-motion

カラー モジュールのカラー フォーカスのメディアクエリと同様に、@prefers-reduced-motion メディアクエリは、アニメーションに関連するユーザーの OS 設定を確認します。

ユーザーは、モーションを減らすようにディスプレイの設定を変更する場合があります。これらの設定はオペレーティング システムによって異なり、肯定的または否定的なフレーム設定が可能です。@prefers-reduced-motion を使用することにより、そうした選択を尊重したサイトを設計できます。

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

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

運動促進のためのプログレッシブ エンハンスメント

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

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

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

レイヤ化されたメディアクエリ

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

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

ユーザーを楽しませるためにデジタル プロダクトにアニメーションを組み込むのは楽しいことですが、そうしたデザインが一部の人々に影響を与えることを忘れてはなりません。動きに対する感度は、軽い不快感から、衰弱性疾患や発作を引き起こすまで、誰にでも影響する可能性があります。

さまざまなツールを使用することで、ユーザーは動きの大きさを推測するのではなく、最適な動作を決定できます。たとえば、サイトまたはウェブアプリ内でアニメーションをオンまたはオフにするトグルを追加します。このようなトグルをデフォルトでオフにすることを検討してください。

理解度を確認する

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