トピックを検索
動きを減らす設定を無視するアニメーション
スクロール、ドロワーやモーダル、アコーディオンの開閉などで始まるアニメーションが、動きを減らす設定を確認せず、ページ上にも止める方法がありません。
問題
前庭障害のある人は、スクロールのたびに内容が下から滑り上がる動きでめまいや吐き気を起こし、それを止める方法がありません。
あるショップの「私たちについて」のページは、5つのセクションで店の歩みを紹介しています。スクロールすると、各セクションが少し下の位置に透明な状態で置かれ、フェードインしながら上へ滑って定位置に収まります。多くのランディングページやサイトのテンプレートが、スクロール連動のアニメーションライブラリでこうした表示をしており、スクロールしている間、内容は常に動いています。滑り込むドロワー、拡大しながら開くモーダル、滑らかに開くアコーディオン、横に流れるカルーセルでも同じ問題が起きます。ここでは、最もよく見かけるスクロール連動の表示を例にします。この訪問者は、動きでめまいが起きるため、OSで動きを減らす設定をオンにしています。それでも、すべてのセクションが下から浮き上がってきます。
達成基準2.3.3「インタラクションによるアニメーション」（レベルAAA）は、操作によって始まる動きのアニメーションを無効にできることを求めています。ただし、機能や情報の伝達に不可欠な動きは除きます。スクロールも操作の一つで、達成基準の解説書も、スクロールに連動する動きや視差効果を例に挙げています。滑り込む動きは、内容の理解に何も加えていません。滑り込んでも最初からあっても、文章の意味は同じです。CSSもスクリプトも prefers-reduced-motion を確認しておらず、ページ独自の切り替えもないため、動きを止める方法がありません。
前庭障害、片頭痛、脳しんとうの後遺症がある人は、大きな移動、視差効果、拡大の動きで、めまい、吐き気、頭痛を起こすことがあり、数時間続くこともあります。スクロールに連動する動きは読んでいる間ずっと続くため、影響がさらに大きくなります。こうした人の多くは、OSの設定で、必要なことをすでに一度伝えています。
10グループ中1グループに影響
- 全盲 （影響なし）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響なし）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 言語・認知・学習の能力が限られる 注意の障害がある人は、内容が動き続けると、どこを読んでいたか分からなくなります。
静的な検査で分かるのはCSSのクラスやライブラリの読み込みで、実際の動きではありません。その動きが不可欠かどうかも判断できません。多くの検査ツールはスクロールしないため、スクロールで始まるアニメーションは一度も再生されません。AIが書く修正は、CSSのtransitionには動きを減らす指定を加えても、JavaScriptで動きを付けるライブラリを見落としがちです。セクションを表示するクラスごと取り除いてしまい、動きを減らすと内容が opacity: 0 のまま見えなくなる修正もあります。
試してみる
「動きを減らす」をオンにして、下のページをスクロールしてください。
スイッチはOSの設定の代わりです。オンのとき、スクロールで滑り込んでくるものはまだありますか？
問題あり 直してみませんか？
私たちについて
下にスクロールして、私たちの話をお読みください。
始まり
二人の友人と小さな店、たくさんの苗から始まりました。
育てているもの
泥炭を使わない土で、近くの農園で育てた観葉植物です。
お届け方法
プラスチックを使わない梱包で、市内は自転車で届けます。
協力先
地元の園芸店と、地域の共同菜園です。
店舗のご案内
木曜から日曜、10時から18時まで営業しています。
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
動きを減らす設定のもとでは、内容をその場に表示します。OSの設定か、ページ上の切り替えに従います。
- 1スクロールや操作で始まるアニメーションはすべて、CSSでもスクリプトでも、動きを減らす設定を確認する。
- 2動きは取り除き、内容は残す。
- 3ページに切り替えを置く場合、初期値はOSの設定に従う。
.reveal { opacity: 0; transform: translateY(80px); transition: opacity 800ms ease, transform 800ms ease;}.reveal.in-view { opacity: 1; transform: none;}この方法を選ぶ理由：動きはオプトインにする
すべてのセクションが、すべての訪問者に対して動きます。動きを減らしたいかどうかを確認する処理がなく、ページ独自の設定もありません。
下にずれて隠れた初期状態と滑る動きは、no-preference の中にだけあります。OSが動きを減らすよう求めているときや、ブラウザーが設定を伝えられないときは、セクションは最初からそこにあります。打ち消すものがないため、後から加えたアニメーションが漏れることもありません。監視用のスクリプトはそのままで構いません。ライブラリで動きを付けている場合は、ライブラリ独自の動きを減らすオプションも有効にしてください。多くのライブラリはJavaScriptでtransformを指定するため、このCSSでは止められません。
どちらも基準を満たします。メディアクエリは数行で済み、画面に部品を足す必要がなく、訪問者がすべてのサイトに向けて選んだ設定を尊重します。ただし、OSの設定を知っていて、変更できる人にしか届きません。ページ上の切り替えはそうした人にも届きますが、部品のデザイン、配置、名前付けと、動く前に読み込む保存済みの設定が必要です。動きが軽い場合はメディアクエリだけを使い、動きがデザインの大きな部分を占める場合、共用のパソコンで使われる場合、利用者から要望がある場合は切り替えも加えてください。
動きを減らすとは、移動を取り除くことで、内容を取り除くことではありません。短いフェード、色の変化、瞬時の変化は、おおむね問題ありません。取り除くのは、滑る、拡大する、回る、視差、長いスムーズスクロールです。ポインターに付いてくるドラッグのように、機能そのものである動きは残します。
動くほかの部品にも、同じ方法で対応します。どれも開く、閉じる、切り替わるという結果は残し、移動だけを取り除きます。
- ドロワー：滑り込まず、その場で表示するかフェードにする。
- モーダル：拡大や落下ではなく、フェードにする。
- アコーディオン：高さを伸ばさず、すぐに開く。
- カルーセル：横に流さずにスライドを切り替える。
- 画面遷移：滑らせずに表示を入れ替える。
opacity: 0 から始まり、スクリプトを待って表示される内容は、どの設定でも壊れやすいものです。スクリプトが失敗したり監視が反応しなかったりすると、セクションは表示されません。最初の修正のように、隠れた初期状態は @media (prefers-reduced-motion: no-preference) の中に書くか、スクリプトから加えます。
見落としが多いのはJavaScriptのアニメーションです。スクロール連動や視差効果のライブラリ、カルーセル、scrollIntoView({ behavior: 'smooth' })、scroll-behavior: smooth、シングルページアプリの画面遷移を確認し、ライブラリ独自の動きを減らすオプションを有効にしてください。すべての animation-duration と transition-duration をほぼ0にする一括ルールは安全網になりますが、スクリプトが直接動かすものには効かず、transitionend を待つコードが動かなくなることもあります。
自動再生のカルーセルや背景動画など、操作なしで始まる動きは、この基準ではなく2.2.2「一時停止、停止、非表示」の対象です。動きを減らす設定のもとでは、これらも止めることをおすすめします。
修正の確認
4つの確認
確認方法： 動きを減らす設定、キーボード、マウス
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。新しいアニメーションを加えたときや、アニメーションライブラリを更新したときは、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。2.3.3はレベルAAAの基準のため、多くの適合目標では必須ではありません。それでも、動きを減らす設定は訪問者からの直接の要望で、対応の手間も小さいものです。どの動きで気分が悪くなるかは人によって異なります。この設定を使っている人とのテストから、どんなルールよりも多くのことが分かります。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。