2.3.3 インタラクションによるアニメーション

要件

インタラクションに起因して発生するアニメーションは、無効にできる手段を提供すること

背景と目的

マウスホバーやスクロールなどの動作で発生するトランジション・モーション・視差効果などが、

• めまい
• 吐き気
• 注意散漫
• 動作性障害

を引き起こすユーザーが存在します。
こうしたユーザーに対し、視覚効果をオフにできる選択肢を用意することが重要です。

対象となるアニメーション例

インタラクション例	アニメーション内容
スクロール	パララックス、背景移動、コンテンツのズーム
ホバー	ボタンが跳ねる、イラストが揺れる
クリック	メニューがスライド、モーダルが回転表示
入力時	テキスト欄が波打つ、背景色が変化する

実装方法（例）

CSSの @media (prefers-reduced-motion: reduce) を活用し、OS設定に従ってアニメーションを抑制

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

独自に「アニメーションオフ設定」を提供する（トグルスイッチや設定画面）
もしくはブラウザの拡張機能やOS設定に準拠する設計に留意する

具体例

NG例	OK例
ページスクロールで毎回バナーがズーム・回転する	prefers-reduced-motion によりズーム効果を除外
ホバーでキャラクターが跳ねる・踊る	「視覚効果オフ」ボタンで停止できる
モーダルが3D回転で表示され閉じる	通常表示＋静止表示の切り替えが可能

利点

• モーション感受性のあるユーザー（自律神経系の不調など）への配慮
• OSやブラウザ設定に準拠する設計により、より広範なユーザーに対応
• UIコンポーネントとしての一貫性を保ちつつ、ユーザーの選択権を尊重

まとめ

項目	内容
達成基準	2.3.3：インタラクションによるアニメーション（AAA）
要件	操作で再生されるアニメーションは「オフにできること」
技術対応	prefers-reduced-motionの使用や独自設定の提供
対象	ホバー、クリック、スクロール、入力などの操作
利点	めまい・吐き気・集中困難などの防止、安全なUI提供

一覧に戻る