この記事でわかること

  • 動きについて、W3CのWCAGが決めている2つの基準
  • 自動で動く部分を、利用者が止められるようにする方法
  • 「動きを減らす」設定に合わせるCSS(prefers-reduced-motion)の書き方
  • 作ったページの動きを書き出して確かめる手順

スライドショーやスクロールに合わせて出てくる飾りなど、動きのあるデザインは目を引きます。一方で、動き続けるものに気を取られて読めない人や、動きを見て気分が悪くなる人もいます。この記事では、そうした人に配慮するための考え方と作り方を、Webのアクセシビリティの国際的な基準WCAGに沿ってまとめます。

元にしたのはW3Cが公開しているWCAG 2.2の本文と、達成基準の解説、CSSの技法のページで、確認した日は2026年10月24日です。法律の決まりと、特定のツールやスクールの紹介は扱いません。文字の大きさを利用者が変えても崩れない作りは、Webデザインで文字の大きさと行間を決める方法で紹介しています。

先に結論: 自動の動きは止められるように、操作の動きは減らせるようにする

先に結論を書くと、自動で動き続ける部分には、利用者が止めたり隠したりできる仕組みを付けます。操作に合わせて動く飾りは、利用者が「動きを減らす」設定にしているときは出さないようにします。 動きの種類ごとにまとめると、次のとおりです。

動き すること
自動の5秒超 止める仕組み
自動の更新 止めるか頻度
点滅 5秒で止める
操作で動く 減らせる
欠かせない そのまま

動きに関わるWCAGの2つの基準

WCAG 2.2には、動きについて次の2つの達成基準があります。

  • 達成基準2.2.2(レベルA、Pause, Stop, Hide): 自動で始まり、5秒より長く続き、ほかの内容と並んで出る、動く・点滅する・流れる情報には、利用者が一時停止・停止・非表示にできる仕組みを用意する。自動で更新される情報は、一時停止・停止・非表示か、更新の頻度を変えられるようにする
  • 達成基準2.3.3(レベルAAA、Animation from Interactions): 操作をきっかけに起きる動きのアニメーションは、機能や伝える情報に欠かせない場合を除いて、止められるようにする

W3Cの解説では、2つの違いを、2.3.3は利用者の操作が始める動き、2.2.2は利用者が意図して押したのではなく、ページが自動で始める動きだと説明しています。どちらにも、欠かせない動きは除くという例外があります。

自動で動く部分は止められるようにする

達成基準2.2.2の解説では、「自動で始まる」とは、リンクやボタンを選ぶような意図した操作の直接の結果ではない動きや更新のことだとしています。要素にマウスを重ねたときや、スクロールで画面に入ったときに始まる動きも、自動で始まるものとして扱います。

W3Cの解説では、動いたり自動で更新されたりする内容は、止まった文字を速く読むのが苦手な人や、動くものを目で追うのが苦手な人の妨げになり、画面の読み上げソフトにも問題を起こすことがあるとしています。注意の障害のある一部の人は、絶えず動くものに気を取られるとしています。

5秒という区切りについて、W3Cの解説では、利用者の注意を引くには十分で、必要なら待てないほど長くはない長さとして選んだとしています。たとえば、注意を引くために点滅する広告が5秒で止まる例や、アニメーションの近くに止めるボタンを置く例が挙げられています。

光の点滅には、もう1つ別の注意があります。W3Cの解説では、1秒に3回より多く、大きく明るい閃光は発作を起こすおそれがあり、1秒でも認められないとしています。閃光は別の達成基準(2.3.1など)で確かめます。

操作で動く部分は減らせるようにする

達成基準2.3.3の解説では、一部の利用者は、動きのある内容で気が散ったり、吐き気を感じたりするとしています。ページをスクロールしたときに、スクロールに伴う動き以外で要素が動くと、内耳の前庭の障害の反応を引き起こすことがあり、その反応には、めまい・吐き気・頭痛があるとしています。背景と手前の要素が違う速さで動くパララックス(視差効果)も、多くの場合は欠かせない動きではない例として挙げられています。

W3Cの解説では、次の3つのどれかで対応できるとしています。

  1. 不要な動きを使わない
  2. 止める切り替えを用意する: 操作で起きる欠かせない動き以外を、利用者が止められるようにする
  3. 端末の設定を生かす: ブラウザやOSの「動きを減らす」機能に合わせる

なお、スクロールで新しい内容が画面に入ってくる動きは、スクロールに欠かせない動きで、利用者が自分で操作しているので認められるとしています。

CSSで「動きを減らす」設定に合わせる

W3Cの技法C39では、CSSのメディアクエリ prefers-reduced-motion を使い、利用者が端末で選んだ動きの設定に合わせて、アニメーションを出さないようにする方法を示しています。書き方は2つあります。

  • 動きを止める書き方: ふだんのCSSで動きを付け、「動きを減らす」を選んだ人(reduce)のときだけ動きを止める
  • 動きを足す書き方: 動きのない見た目を先に書き、「動きを減らす」を選んでいない人(no-preference)のときだけ動きを足す

次のCSSは、技法C39の2つの書き方に、例のクラス名を入れた見本です。サイトのCSSに足すときの形を示すためのもので、実行するコマンドではありません。サイトのCSSを書き換えるときは、直す前のファイルを写して残しておきます。

/* 書き方1: 「動きを減らす」を選んだ人には、スライドの動きを止める */
@media (prefers-reduced-motion: reduce) {
  .slide { animation: none; }
}

/* 書き方2: 動きのない見た目を基本にし、選んでいない人にだけ動きを足す */
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform 0.3s; }
}

JavaScriptで動かしている部分には、同じ設定をJavaScriptから読む方法(技法SCR40)も、達成基準2.3.3の解説で挙げられています。

手順: ページの動きを書き出して確かめる

  1. 動く部分を書き出す: 自動で動くもの、点滅するもの、自動で入れ替わるもの、操作で動くものを、ページの上から順に一覧にします
  2. 自動で動くものを確かめる: 5秒より長く続き、ほかの内容と並んで出ているものに、止める・隠すボタンがあるかを見ます
  3. 自動で更新されるものを確かめる: 止めるか、更新の間隔を変えられるかを見ます
  4. 「動きを減らす」設定をオンにする: パソコンやスマートフォンの設定で、動きを減らす設定をオンにします。W3Cの解説の参考資料には、iPhone・Mac・Windowsの設定のページが挙げられています
  5. 操作で動く部分を1つずつ試す: 技法C39の確かめ方のとおり、その動きが欠かせないものか、または動きが出なくなっているかを見ます
  6. 設定を元に戻す: 確かめ終わったら、端末の設定を元に戻します

自分で直すか、相談するかの判断

判断の目安は、「CSSの動きに、メディアクエリを足すだけで済むか」です。CSSのtransitionやanimationで付けた飾りの動きなら、見本の形でprefers-reduced-motionを足し、設定をオンにしてもう一度試します。

JavaScriptで動かしているスライドショーや、外から読み込む広告・部品のように、自分のCSSでは止められない動きもあります。書き出した動きの一覧を持って、サイトを作った人や、Webデザインを教えている人に、止めるボタンを付けられるかを聞きます。

つまずきやすいところ

  • フォーカスしている間だけ止まる: 達成基準2.2.2の解説では、要素にフォーカスを置いている間だけ止まり、離すとまた動く作りは、止める仕組みとはみなさないとしています
  • 止めるボタンが別々にある: W3Cの解説では、動く部分が複数あるなら、まとめて止められる1つの仕組みを用意することを望ましいやり方としています
  • 止めるボタンをキーボードで押せない: 止めるボタンも、Tabキーで選んで押せる必要があります。確かめ方は、Webデザインでキーボードだけで操作できるかを確かめる方法で紹介しています
  • 止めるボタンが背景にとけ込む: ボタンの文字や枠が見えにくいと、止める仕組みがあっても気づけません。色の差の確かめ方は、Webデザインで文字と背景のコントラストを確かめる方法で紹介しています

まとめ

  • 自動で動き、5秒より長く続く部分には、止める・隠す仕組みを付けます
  • 操作で起きる飾りの動きは、「動きを減らす」設定のときは出さないようにします
  • CSSでは、prefers-reduced-motionのメディアクエリで、設定に合わせて動きを止めるか足します
  • 確かめるときは、端末の「動きを減らす」設定をオンにして、動きを1つずつ試します