達成基準 2.3.3: インタラクションによるアニメーションを理解する

意図

この達成基準の意図は、アニメーションがウェブページに表示されるのを利用者が防止できるようにすることである。一部の利用者は、動きのあるコンテンツから、注意散漫又は吐き気を経験することがある。例えば、ページのスクロールによって要素が動く (スクロールに伴う必要不可欠な動きを除く) と、前庭障害が発生する可能性がある。前庭 (内耳) 障害の反応には、めまい、吐き気、頭痛などがある。必要不可欠ではないことが多いアニメーションの一つは、スクロールによるパララックス (視差効果) である。スクロールによるパララックスは、背景が前景とは異なる速度で動くと発生する。この達成基準では、ウェブページの機能や情報に必要不可欠なアニメーションは許容される。

「インタラクションによるアニメーション」は、利用者の操作によって必要不可欠でないアニメーションが開始されたときに適用される。一方、達成基準 2.2.2 一時停止、停止、非表示は、ウェブページがアニメーションを開始するときに適用される。

ウェブサイトはどのようにして前庭障害を引き起こす可能性を減らすことができるか？　次のいずれかの解決策を選択する。不要なアニメーションは使用しない。インタラクションから必要不可欠でないアニメーションを無効にするためのコントロールを利用者に提供する。ユーザエージェント又はオペレーティングシステムのモーション軽減機能を利用する。

利用者がページをスクロールすることによって引き起こされる動きについてはどうか？　新しいコンテンツをビューポート内に移動させることは、スクロールにおける必要不可欠な動きである。利用者は必要不可欠なスクロールの動きを制御しているので、これは許容される。必要不可欠なアニメーションだけを、適切な方法でスクロールのインタラクションに追加すること。不要な動きは、利用者が常に無効にできるようにすること。

メリット

• 前庭障害
  • 前庭障害の人は、インタラクションによって引き起こされる動きをコントロールする必要がある。必要不可欠でない動きは前庭障害の反応を引き起こす可能性がある。前庭 (内耳) 障害の反応には、注意散漫、めまい、頭痛、吐き気などがある。
  • ペルソナの心の声:「余計な動きはやめてください！　めまいがして集中できません。もうパソコンを切って横にならないと。」

事例

• 不要な動きを全体的に無効化するオプションを備えたパララックス (視差効果) スクロール:
  • あるサイトには、利用者がスクロールすると追加のアニメーションが表示される。必要不可欠なページコンテンツが垂直方向にスクロールされると、装飾要素が水平方向に視界に入ったり出たりする。利用者は、各ページの上部にあるコントロールにより、不要なアニメーションを止めることができる。必要不可欠でないアニメーションを止める機能は、サイト全体に適用される。
• 動きの軽減設定をサポートするトランジション効果:
  • あるサイトには、新しいコンテンツを読み込む際に必要不可欠でないトランジション効果が含まれる。このトランジション効果は、ページめくりのアニメーションであり、reduce-motion CSS メディアクエリに従うものである。利用者がモーション軽減設定を有効にすると、ページめくりのアニメーションがオフになる。
• 必要不可欠なアニメーション:
  • あるウェブアプリケーションには、アニメーションの順序を作成する機能がある。このツールの一部として、コンテンツ制作者はアニメーションをプレビューする必要がある。

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

• Mozilla documentation for 'prefers-reduced-motion'
• Demonstration of 'prefers-reduced-motion' in Webkit
• An Introduction to the Reduced Motion Media Query
• Designing Safer Web Animations for Motion Sensitivity
• iOS: Reduce Motion on iPhone, iPad or iPod touch
• Mac: Reduce Motion
• Windows 10: Reduce motion

達成方法

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

重要な用語