発作や身体的反応を防ぐガイドライン

2.3.1 3回せん（閃）光、又はしきい（閾）値以下 (レベル A)

激しく点滅する（閃光を放つ）コンテンツを設置せず、利用者の安全を守る

作成日: 2024.4.10 / 最終修正日: 2026.5.10

この達成基準は、光の刺激で体調に影響が出やすい利用者が、画面の激しい点滅によって発作などを起こす危険を防ぐことを目的としています。この基準は、満たさないと利用者の健康に直接的な被害を及ぼす可能性があるため、「非干渉（満たさないとページ全体の利用が難しくなる重大な問題）」として扱われます。

実践すべきこと

激しい点滅表現を避ける

• ウェブページ上のいかなるコンテンツ（動画、GIFアニメーション、CSSアニメーションなど）においても、原則として閃光を放つ（激しく点滅する）表現を使用しない。
• どうしても点滅表現が必要な場合でも、1秒間に3回以内の点滅に抑えるか、点滅する面積を画面の極めて小さな範囲（特定の閾値以下）に制限する。

運用者への注意

動画コンテンツ等の安全確認

• 新たに動画コンテンツやGIFアニメーションを掲載する際は、フラッシュ効果や、赤色の激しい点滅が含まれていないかを事前に確認する。
• 外部の映像制作会社等が作成した動画をウェブサイトに掲載する場合も、この安全基準を満たしているか納品時にチェックを行う。

開発者への注意

意図的な点滅アニメーションの回避

• 利用者の注意を引く目的であっても、要素の背景色や透明度を高速で切り替えるようなCSSアニメーション（@keyframes を用いた高速なループ処理など）や、JavaScriptによる点滅処理を実装しない。

今のWeb環境で気をつけたい点

• 警告表示だけでは不十分：「※激しい光の点滅にご注意ください」というテキストを添えたとしても、ページを開いた瞬間に動画やGIFが自動再生されてしまえば発作は防げません。システム側で自動再生させない（2.2.2に関連）か、基準を超える点滅を含んだファイルをアップロードしない運用が必要です。
• 利用者投稿コンテンツの扱い：利用者が自由に画像を投稿できる掲示板やSNSでは、悪意の有無に関わらず、激しく点滅するGIFアニメーションが投稿されるリスクがあります。このようなプラットフォームでは、特にアニメーションの自動再生の制御が重要になります。

参考リンク

解説書 達成基準 2.3.1: 3回せん（閃）光、又はしきい（閾）値以下

2.3.2 3回の閃光 (レベル AAA)

画面の大きさや色に関わらず、1秒間に3回を超える「激しい点滅」を避ける

作成日: 2024.4.10 / 最終修正日: 2026.5.27

この達成基準は、光の刺激で体調に影響が出やすい利用者の安全を守ることを目的としています。レベルAの基準（2.3.1）では「点滅する面積が画面の一定割合より小さければ安全とみなす」という例外がありましたが、このレベルAAAではその例外をなくし、「いかなるサイズであっても、1秒間に3回を超える閃光（点滅）を含めない」というルールを定めています。

実践すべきこと

あらゆる点滅・閃光の制限

• ウェブページ上のすべてのコンテンツ（動画、アニメーションGIF、CSSアニメーション、ゲーム画面など）において、1秒間に3回を超える閃光（明るさや色の急激な変化によるチカチカ）を発生させない。

運用者への注意

動画コンテンツの事前チェック

• ライブ映像、フラッシュを多用したミュージックビデオ、激しいエフェクトを含むゲームの実況動画などを掲載する場合は、事前に映像編集ソフトや専用のチェックツールを用いて、危険な点滅が含まれていないかを検査する。

開発者への注意

アニメーションの速度制御

• CSSの @keyframes やJavaScriptで要素を点滅させる演出を実装する場合、点滅の周期を十分に遅く（1秒間に2回以下に）設定する。

今のWeb環境で気をつけたい点

• レベルAAAの難易度と優先度： 他のレベルAAA基準が「技術的に難しい」ことが多いのに対し、この基準は「点滅させない」ことで対応できます。一方で、ストロボ演出などの芸術的表現を制限する場合があるため、「レベルAAA」に設定されています。まずは閾値（面積）による例外を認める 2.3.1 を満たすことが優先ですが、光による発作は重大な健康被害につながるため、特別な芸術的理由がない限り、企業・行政サイトではこの「点滅を控える（AAA）」方針を基本の制作ルールとして採用することが推奨されます。
• ショート動画やGIFアニメの注意点： TikTokやYouTubeショートなどの台頭により、端末のアプリから簡単に動画をWeb上に投稿できるようになりました。自社のSNSキャンペーンなどで利用者投稿の動画をサイトに埋め込む際、意図せず激しいエフェクトや点滅コンテンツを自社サイトに持ち込んでしまう事故が起きやすいため、注意が必要です。

参考リンク

解説書 達成基準 2.3.2: 3回の閃光

2.3.3 インタラクションによるアニメーション (レベル AAA)

パララックス等のスクロールや選択操作に連動して動く過剰なアニメーションをオフにできるようにする

作成日: 2024.4.10 / 最終修正日: 2026.5.27

この達成基準は、画面の大きな動きでめまい、吐き気、頭痛などが起きやすい利用者を守ることを目的としています。利用者が画面をスクロールした際に背景と手前の要素が違う速度で動く「パララックス（視差効果）」や、リンクを選択したときに画面全体が大きくズームアウトして別の画面に移動するような「モーションアニメーション」は、画面酔いを引き起こす原因となるため、これを無効化にする手段を求めています。

実践すべきこと

モーションアニメーションの無効化

• スクロールやドラッグなど、利用者の操作が引き金となって開始される画面の大きな動きを、利用者がオフにできる機能を提供する。

例外事項（機能に不可欠なもの）

• ファイルのアップロード状況を示す「プログレスバーの動き」や、ドラッグしているオブジェクト自体の動きなど、そのアニメーションがないと機能の意味が伝わらないものは例外として許容される。

運用者への注意

過度なスクロール演出の抑制

• ブランドサイトや採用サイトなどを企画する際、「スクロールに合わせて要素が次々と飛び出してくる」「背景がぐるぐる回る」といったリッチな演出が、一部の利用者に深刻な画面酔いを与える可能性があることをチームで共有し、演出の過剰な使用を控える。

開発者への注意

prefers-reduced-motion の積極的な活用

• Webサイト側に独自の「アニメーションをオフにするボタン」を作らなくても、CSSのメディアクエリ @media (prefers-reduced-motion: reduce) を使用することでこの基準を満たすことができます。利用者がOSやブラウザの設定で「視差効果を減らす」をオンにしている場合、パララックスを無効にして単なるスクロールにしたり、ふわっとフェードインするだけの簡素な動きに変更したりする実装を標準仕様として組み込んでください。

今のWeb環境で気をつけたい点

• レベルAAAの難易度と優先度： すべてのアニメーションに対して「動くバージョン」と「動かないバージョン」の2つのCSS/JSを用意することは開発の負担が増加するため、「レベルAAA」に設定されています。まずは勝手に動き出すカルーセルなどを止められる 2.2.2（一時停止、停止、非表示）を満たすことが最優先ですが、CSSの prefers-reduced-motion さえ正しく設定しておけば、開発の大きな負担なくこのAAA基準をクリアできるため、「AAAであっても導入を検討すべき項目」として推奨されています。
• 2.2.2（自動再生）との違い： レベルAの 2.2.2 は「サイトを開いただけで勝手に動き出すもの（動画やカルーセル）」を止めるための基準です。一方、この 2.3.3 は「利用者自身がスクロールなどをした結果、連動して動くもの」に対する基準です。利用者が自ら操作しているにも関わらず、予想を超えた激しい動きが返ってくることで酔いを起こすため、別々の基準として定義されています。

参考リンク

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

目次へ戻る