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

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

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 をすべて一緒に使用できます。

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

アニメーションをデジタル プロダクトに組み込んでユーザーを楽しませることは楽しいことですが、一部のユーザーはこれらのデザインの影響を受けることを覚えておくことが重要です。 動きに対する過敏症は、わずかな不快感から、衰弱させる病気や発作を引き起こすまで、誰にでも影響を与える可能性があります。

さまざまなツールを使用して、動きの量が多すぎるかどうかを推測するのではなく、ユーザーが自分に最適なものを選択できるようにすることができます。たとえば、サイトまたはウェブアプリ内でアニメーションをオンまたはオフにするトグルを追加します。このようなトグルはデフォルトで [オフ] にすることをおすすめします。