WCAG 達成基準 · Level A
WCAG 2.3.1: 3回の閃光、または閾値以下
WCAG 2.3.1 は、フラッシュが一般的な閾値または赤色フラッシュの閾値を下回る場合を除き、1秒間に3回を超えて点滅するものをウェブコンテンツに含めないことを求めています。この基準は、光感受性てんかんや類似の神経学的な状態を持つユーザーにおける発作や身体的反応を防ぐうえで極めて重要です。
- Level A
- Wcag
- Wcag 2 2 a
- 操作可能
- アクセシビリティ
このルールの意味
WCAG 2.3.1「3回の閃光、または閾値以下」は、原則「操作可能」におけるレベルAの達成基準です。これは、ウェブページに含まれるコンテンツが、いかなる1秒間においても3回を超えて点滅してはならないことを求めています。ただし、その点滅コンテンツが十分に小さいか、十分に暗く、定義された一般閃光閾値または赤色閃光閾値を下回る場合は例外です。
閃光(flash)とは、感受性の高い人に発作を引き起こす可能性のある、相対輝度の対立する変化の組を指します。具体的には、WCAGは2種類の危険な閃光を定義しています。
- 一般閃光: 高い方の輝度が最大相対輝度(0.80)の少なくとも10%であり、かつ輝度差が最大値の少なくとも10%である、対立する変化の組。実務的には、明るい状態と暗い状態の間を高速で切り替え、ストロボのような効果を生むコンテンツを意味します。
- 赤色閃光: 飽和した赤色を伴う対立する遷移の組。赤色の閃光は光感受性発作を誘発するリスクが高いことが臨床的に関連付けられているため、特に注意が払われます。
この達成基準は、形式を問わずすべてのウェブコンテンツに適用されます。HTMLアニメーション、CSSトランジション、JavaScriptによるエフェクト、埋め込み動画、GIF、SVGアニメーション、WebGLシーン、canvasで描画されたグラフィック、サードパーティの広告ウィジェットなどが含まれます。コンテンツが1秒あたり3回を超える頻度で点滅し、かつ輝度またはサイズの閾値を下回らない場合、そのコンテンツは無条件にこの達成基準に不適合となります。
コンテンツが適合とみなされる例外と閾値: WCAG 2.3.1は、以下のいずれかの条件を満たす場合、点滅コンテンツを許容しています。
- 同時に発生する閃光の合計領域が、画面上の任意の10度の視野内で合計0.006ステラジアンを超えないこと(典型的な視距離において約341×256ピクセルの矩形、または腕の長さの距離で閲覧される幅1024ピクセルのディスプレイ上でおよそ21,824平方ピクセル)。
- 閃光が一般閃光閾値(輝度変化が10%未満)を下回るか、赤色閃光閾値(飽和した赤成分の変化が定義された閾値を超えない)を下回ること。
したがって、輝度コントラストが非常に低い単発の閃光や、画面上の領域が非常に小さい閃光は許容される場合があります。しかし、これらの閾値は微妙であり、正確に検証するには測光ツールが必要となるため、多くの実務者は、1秒あたり3回を超える点滅コンテンツを一切使用しないという保守的なアプローチを採用しています。ちょうど1秒あたり3回(3 Hz)点滅するコンテンツは境界上にあり、3 Hzを超えるコンテンツは、サイズまたは輝度の閾値が明確に満たされていない限り、サイズに関係なく不適合となります。
この達成基準は、通常のページ操作中にレンダリングされるあらゆるコンテンツを対象とします。ユーザー操作によってのみ表示されるコンテンツであっても、ページ読み込み時に自動再生される場合は免除されません。動画が自動再生され、その中に閾値を超える点滅シーケンスが含まれている場合、そのページは読み込み直後からこの達成基準に不適合となります。
なぜ重要か
光感受性てんかんは、世界全体で約4,000人に1人、全てんかん患者の約3%に影響を及ぼすとされています。しかし、急速に点滅またはちらつく光への感受性は、臨床的なてんかんに限られません。片頭痛障害、前庭機能障害、自閉スペクトラム症、脳震盪後症候群などを持つ多くの人が、診断された発作性障害がなくても、急速に点滅する視覚刺激によって、著しい不快感、方向感覚の喪失、吐き気、痛みを経験する可能性があります。
この達成基準は、他の多くのアクセシビリティ要件と比べて、リスクの重大性が際立っています。代替テキストが欠落しているコンテンツに遭遇したユーザーは、排除感やフラストレーションを感じます。一方、光感受性発作を引き起こすコンテンツに遭遇したユーザーは、意識喪失、転倒による怪我、そして稀ではあるものの記録された事例として生命の危険を伴う結果を含む、医療的緊急事態に陥る可能性があります。テレビ放送におけるこうした事態を防ぐために特別に開発された、広く利用されている放送用ツールが Harding Flash and Pattern Analyzer であり、ウェブにも同様のリスクが存在します。
現実の具体的なシナリオは、この危険性をよく示しています。例えば、明暗のフレームが高速で交互に切り替わるプロモーション動画を自動再生するニュースサイトを考えてみてください。これは特定の動画圧縮やカメラのフラッシュ効果に起因する一般的なアーティファクトです。光感受性てんかんを持つユーザーが、朝の通勤中にモバイル端末でそのサイトのホームページを訪れます。何の警告もなく、またコンテンツを無効化する手段もないまま、そのユーザーは発作を誘発するシーケンスにさらされ、公共交通機関を利用中に発作を起こしてしまいます。このシナリオは仮定ではなく、実際の文脈で発生しています。日本で数百人の視聴者に発作を引き起こしたことで悪名高い2007年のポケモンのエピソード事件や、ウェブベースの広告ユニットに関連する記録された事例などがその例です。
安全性の側面を超えて、この達成基準への適合は一般ユーザーのユーザビリティにも影響します。急速に点滅するコンテンツは、読みやすさを損ない、認知負荷を高め、ほとんどのデザイン文脈において邪魔でプロフェッショナルでないと見なされます。このようなコンテンツを排除することで、集中力が高まり、直帰率が下がり、信頼性の高さを示すことができます。これらはすべて、滞在時間やエンゲージメント率といったSEO指標にプラスに働きます。さらに、検索エンジンのクローラーは、Core Web Vitals やユーザー体験シグナルをランキングにますます反映しており、侵襲的な点滅広告やアニメーションを持つサイトは、間接的に評価を下げられる可能性があります。
関連する Axe-core のルール
WCAG 2.3.1は、動的コンテンツの測光特性をリアルタイムで信頼性高く分析することが自動ツールにはできないため、手動テストを必要とします。この達成基準に直接対応する axe-core の自動ルールは存在しません。この制約の理由は、アクセシビリティ自動化の仕組みに根本的に関わるものです。
- ここで自動化が機能しない理由: 自動スキャナーは、ある時点の静的なDOMとCSSを解析します。アニメーションや動画要素の存在は検出できますが、実際の点滅頻度、各フレームの輝度値、典型的な視距離で人間の視聴者が知覚する点滅領域の空間的な大きさを測定することはできません。点滅が3 Hzの閾値や0.006ステラジアンの面積閾値を超えているかどうかを判断するには、フレームごとの測光分析が必要であり、Harding Flash and Pattern Analyzer (HFPA) や Photosensitive Epilepsy Analysis Tool (PEAT) といった専用ツール、あるいはアニメーションソースファイルの手動レビューが必要です。
- 埋め込み動画とサードパーティコンテンツ: 最もリスクの高いコンテンツの多く(自動再生される動画広告、埋め込みソーシャルメディアウィジェット、サードパーティのアニメーションライブラリなど)は外部ドメインから読み込まれます。自動ツールは通常、クロスオリジンコンテンツにフレームレベルでアクセスしたり分析したりできないため、それらのリソース内の点滅頻度をプログラム的に評価することは不可能です。
- GIF と canvas アニメーション: アニメーションGIFファイルやHTML5 canvas要素は、通常のアクセシビリティツリーの外側でアニメーションフレームをレンダリングします。axe-core と Lighthouse はどちらも、GIFのフレームタイミングをデコードしたり、フレーム間の輝度変化を計算するために canvas の描画呼び出しを傍受したりする機能を持っていません。
- CSS と JavaScript アニメーション: axe-core は CSS の
animationやtransitionプロパティの存在を検出することはできますが、実行時の視覚的な出力が一般閃光閾値または赤色閃光閾値を超える輝度変化を生じているかどうかを評価することはできません。
この違反を検出する自動ルールが存在しないため、適合の責任はすべて、デザインの手動レビュー、公開前の動画分析、コンテンツ作成段階における開発者の認識にかかっています。そのため、持続的な適合を実現するには、技術的な是正だけでなく、編集およびQAのプロセス管理が不可欠です。
テスト方法
- すべての動的コンテンツの棚卸し: ツールを用いたテストの前に、ページ上で動く、点滅する、点灯する、またはアニメーションするすべてのコンテンツを監査します。これには、自動再生動画、アニメーションGIF、CSSキーフレームアニメーション、JavaScriptによるアニメーション、SVGアニメーション、canvas要素、広告ユニットやソーシャルメディア埋め込みなどのサードパーティウィジェットが含まれます。それぞれのインスタンスについて、そのソースと制御メカニズムを記録します。
- Photosensitive Epilepsy Analysis Tool (PEAT) の使用: PEATは、Harding仕様に基づき、動画コンテンツの閃光危険性を分析するために Trace Research and Development Center によって開発された無料ツールです。問題のウェブページまたはアニメーションをフル解像度で画面録画し、その動画ファイルをPEATにインポートします。ツールは、どのシーケンスが一般閃光閾値または赤色閃光閾値を超えているか、そしてどのタイムスタンプで発生しているかを報告します。
- 放送品質コンテンツには Harding Flash and Pattern Analyzer を適用: 制作ワークフローから埋め込まれる動画コンテンツ(例: 放送局のウェブサイト、ニュースサイト)については、公開前にソース動画ファイルをHFPAに通します。これは公開前スクリーニングのゴールドスタンダードツールです。
- 手動観察 — 3回の閃光カウント: ツールによる分析が現実的でないCSSアニメーション、JavaScriptエフェクト、GIFファイルについては、アニメーションを再生し、1秒間に完了する明→暗→明のサイクル数を数えてみます。1秒あたり3回以上の完全なサイクルが観察される場合、そのコンテンツは不適合である可能性が高いです。このカウントを補助するため、フレーム単位で再生できる画面録画ソフトを使用します。
- 動画コンテンツをフレーム単位で確認: DaVinci Resolve(無償版)など、フレームレベルの波形やヒストグラムデータを表示できる動画編集ソフトで動画ファイルを開きます。急速な視覚変化があるセクションをスクラブし、1秒あたり3回を超える頻度で発生する高輝度と低輝度の交互パターンを確認します。特に、暗い背景に対する飽和した赤色を含むシーケンスに注意します。
- CSSアニメーションにはブラウザ開発者ツールでテスト: Chrome DevTools で「More Tools → Animations」から Animations パネルを開きます。宣言されているアニメーションの継続時間と反復サイクルを確認します。継続時間が333ミリ秒未満で、各反復ごとに高コントラスト状態を交互に切り替えるアニメーションは、3 Hzの閾値を超えます。計算としては、明→暗→明の完全なサイクルが333ms未満で完了する場合、そのコンテンツは不適合です。
- 境界ケースでは空間的な面積を評価: コンテンツが3 Hzを超える頻度で点滅しているものの、画面上では非常に小さく見える場合、そのピクセル寸法を測定します。幅1024ピクセルのディスプレイを通常の視距離(約57〜60cm)で閲覧する場合、安全領域の閾値はおよそ21,824平方ピクセルです。点滅領域の幅と高さを掛け合わせ、その結果がこの閾値を下回る場合、そのコンテンツは安全領域の例外に該当する可能性がありますが、この評価は慎重に文書化してください。
- ページ読み込み時の自動再生動画をテスト: ページ読み込み後はいかなる操作も行わず、動画やアニメーションが自動的に再生され始めるかどうかを観察します。もし再生される場合、ユーザーが介入する前に露出してしまうため、上記のテストを直ちに自動再生コンテンツに適用します。
修正方法
急速な点滅を伴う自動再生GIF — 不適切な例
<!-- An animated GIF that cycles between a bright yellow and black frame
at approximately 10 times per second, far exceeding the 3 Hz threshold -->
<img src='attention-flash.gif' alt='Special offer alert' width='600' height='300'>
急速な点滅を伴う自動再生GIF — 適切な例
<!-- Replace the flashing GIF with a static image and use a subtle CSS
animation that does not alter luminance rapidly. The animation here
uses a gentle scale pulse at a rate well below 3 Hz (one cycle per 2 seconds). -->
<img src='attention-static.png'
alt='Special offer alert'
class='pulse-attention'
width='600'
height='300'>
<style>
@keyframes gentlePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}
.pulse-attention {
animation: gentlePulse 2s ease-in-out infinite;
}
</style>
高コントラスト色間で点滅するCSSキーフレームアニメーション — 不適切な例
<!-- A CSS animation that alternates a banner between white and black
with a 100ms total duration, producing 10 flashes per second -->
<div class='flash-banner'>SALE NOW ON</div>
<style>
@keyframes flashEffect {
0% { background-color: #ffffff; color: #000000; }
50% { background-color: #000000; color: #ffffff; }
100% { background-color: #ffffff; color: #000000; }
}
.flash-banner {
animation: flashEffect 0.1s linear infinite;
}
</style>
高コントラスト色間で点滅するCSSキーフレームアニメーション — 適切な例
<!-- Slowing the animation duration to 1 second per full cycle means
the luminance alternates once per second (1 Hz), well below the 3 Hz limit.
Alternatively, use prefers-reduced-motion to disable animation entirely
for users who have opted into reduced motion at the OS level. -->
<div class='flash-banner'>SALE NOW ON</div>
<style>
@keyframes flashEffect {
0% { background-color: #ffffff; color: #000000; }
50% { background-color: #000000; color: #ffffff; }
100% { background-color: #ffffff; color: #000000; }
}
.flash-banner {
animation: flashEffect 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.flash-banner {
animation: none;
background-color: #1a1a8c;
color: #ffffff;
}
}
</style>
点滅シーケンスを含む埋め込み自動再生動画 — 不適切な例
<!-- Auto-playing video with no controls, no PEAT analysis performed,
and no mechanism for the user to stop or pause before exposure -->
<video src='promo.mp4' autoplay loop muted width='800' height='450'></video>
点滅シーケンスを含む埋め込み自動再生動画 — 適切な例
<!-- Best practice: provide controls so users can pause immediately,
add a poster frame so no video plays without interaction,
or use preload='none' to prevent auto-loading. If autoplay is
genuinely required by business logic, the video MUST have been
screened with PEAT or HFPA and confirmed free of flash hazards. -->
<video
src='promo-screened.mp4'
controls
muted
preload='metadata'
poster='promo-poster.jpg'
width='800'
height='450'>
<track kind='captions' src='promo-captions.vtt' srclang='tr' label='Türkçe'>
</video>
<p>Bu video flaş analizi aracıyla (PEAT) incelenmiş ve güvenli bulunmuştur.</p>
よくある間違い
- GIFファイルはデフォルトで安全だと想定すること: 多くの開発者は、アニメーションGIFがレガシーフォーマットであるため、本質的に無害だと考えています。実際には、GIFは3 Hzを超える頻度でフレームを切り替えることができ、この形式にはフレームレートに技術的な上限がありません。高コントラストのフレームが交互に現れるすべてのGIFは、そのタイミングを測定し評価する必要があります。
- サードパーティの広告スクリプトを見落とすこと: ディスプレイ広告ネットワークは、点滅や点灯アニメーションを含むクリエイティブを頻繁に配信します。広告タグをコンテンツレビューなしで埋め込むパブリッシャーも、その広告がページ上で引き起こすWCAG 2.3.1違反について責任を負います。広告クリエイティブのレビュー方針や、広告ネットワークとの契約上の要件を実装してください。
- WCAG 2.3.1とWCAG 2.2.2(停止、一時停止、非表示)を混同すること: 一部のチームは、2.2.2を満たすために一時停止ボタンを追加することで症状に対処しますが、2.3.1に違反している根本的な点滅頻度には対処しません。この2つの達成基準は独立しています。コンテンツがすでに点滅を開始した後に一時停止コントロールを提供しても、ユーザーは操作前に露出してしまうため、2.3.1への適合にはなりません。
- 赤色閃光閾値を別個に考慮しないこと: 3 Hzの一般閾値を認識している開発者でも、別個に定義されている赤色閃光閾値を見落とすことがあります。飽和した赤色値が急速に交互に変化するコンテンツは、一部の人にとって3 Hzをわずかに下回る頻度でも光感受性発作を引き起こす可能性があります。飽和した赤色を用いたアニメーションは、特に慎重にレビューすべきです。
- iframe内で読み込まれるコンテンツを無視すること:
<iframe>要素を通じてサードパーティコンテンツ(ソーシャルメディアウィジェット、ライブチャットツール、埋め込みダッシュボードなど)を埋め込むページは、そのページ上でレンダリングされるコンテンツのアクセシビリティに責任を負います。iframe内の閃光の危険性は、メインドキュメント内のものと同じくらい危険です。 prefers-reduced-motionメディアクエリの実装を省略すること: ベースとなるアニメーションが3 Hzの閾値を下回っている場合でも、@media (prefers-reduced-motion: reduce)を実装しないと、OSレベルで動きの軽減を選択しているユーザーに配慮が行き届きません。これは主にAAAレベルのWCAG 2.3.3で扱われますが、このメディアクエリを含めることは、低コストで高い効果を持つ実践であり、アクセシビリティへのコミットメントを示し、リスクを軽減します。- JavaScript の
setIntervalやrequestAnimationFrameをレート制限なしで使用すること:setInterval(fn, 50)で駆動されるアニメーションは50ミリ秒ごとに実行され、1秒あたり20サイクルを生み出します。これは3 Hzの閾値を大きく超えています。輝度を変化させるアニメーションについては、1回の変化が333ms以下にならないよう、必要なインターバル時間を明示的に計算する必要があります。 - 動画コンテンツを公開前にスクリーニングしないこと: 多くの組織は、ビジュアルQAや著作権レビューを含む公開ワークフローを持っていますが、閃光危険性のスクリーニングステップが欠けています。PEATやHFPAを公開前のパイプラインに組み込まないと、動画コンテンツに潜む光感受性の危険性は、実際に被害が出るまで検出されない可能性があります。
- サイズの例外を安易に利用できると考えること: 一部の開発者は、0.006ステラジアンの安全領域の例外について知ると、危険な閃光効果を小さくすることで残そうとします。実際には、コンテンツが閾値内に収まっているかを正確に計算するには、ユーザーの視距離やディスプレイ解像度に関する知識が必要であり、これらは開発者が制御できない変数です。測光による測定なしにサイズの例外に依存することは、リスクが高く法的にも不安定です。
- 閃光危険性の評価を文書化しないこと: 動画やアニメーションコンテンツの閃光危険性をテストしている組織でも、その評価記録を保持していないことがよくあります。ユーザーからの苦情や規制当局の監査があった場合、PEATやHFPAによるスクリーニングが実施され、コンテンツが適合と判断されたことを示す文書化された証拠は、適切な注意義務を示すうえで不可欠です。
トルコのアクセシビリティ規制との関係
トルコの大統領通達 2025/10 は、2025年6月21日付官報第32933号で公布され、WCAG 2.2に整合した必須のウェブおよびモバイルアクセシビリティ要件を定めています。レベルAの達成基準であるWCAG 2.3.1は、すべての対象組織にとって必須適合の範囲に含まれます。
この通達は段階的な適合タイムラインを定義しています。公的機関および政府機関は、通達の発効日から1年以内にレベルAの完全適合を達成しなければならず、規制の対象となる民間セクターの事業者には2年の適合猶予が与えられています。WCAG 2.3.1はユーザーの医療的緊急事態のリスクに直接関わる安全性クリティカルな達成基準であるため、この基準に対する不適合は、他のレベルA要件と比べても、評判および法的なリスクが特に高くなります。
大統領通達 2025/10 で明示的に対象とされており、したがってWCAG 2.3.1に適合しなければならない組織タイプは以下のとおりです。
- 公的機関および政府機関: すべての中央および地方政府機関、省庁、自治体、公的機関に準ずる組織で、一般向けウェブサイトまたはモバイルアプリケーションを運営しているもの。
- 電子商取引プラットフォーム: セクターを問わず、デジタルプラットフォームを通じて消費者に商品またはサービスを提供するオンライン小売およびマーケットプレイス事業者。
- 銀行および金融機関: デジタルバンキングまたは金融サービスを提供する、すべての認可銀行、参加銀行、投資会社、フィンテック事業者。
- 病院および医療提供者: 予約受付や患者ポータルなど、患者向けデジタルサービスを提供する公立・私立病院、ポリクリニック、医療ネットワーク。
- 20万件以上の加入者を持つ通信会社: 加入者数の閾値を満たす主要なモバイルネットワーク事業者およびインターネットサービスプロバイダで、そのセルフサービスポータルやモバイルアプリケーションを含みます。
- 旅行代理店: オンライン予約、予約管理、情報提供サービスを提供する認可旅行・観光代理店。
- 民間輸送会社: 一般消費者向けデジタルプラットフォームを運営する航空会社、都市間バス事業者、フェリー事業者、その他の民間輸送事業者。
- 国民教育省(MoNE)に認可された私立学校: ウェブサイトまたはデジタル学習プラットフォームを運営する、MoNEの認可を受けた私立教育機関。
対象組織にとって、WCAG 2.3.1への適合は一度きりの監査で完結するものではなく、継続的な運用上のコミットメントを意味します。閃光の危険性は、動画のアップロード、マーケティングアニメーション、サードパーティ広告などの動的コンテンツを通じて最も頻繁に持ち込まれるため、組織は初回のサイト監査だけでなく、コンテンツ公開ワークフローの中に閃光危険性のスクリーニングを組み込まなければなりません。公開前の動画スクリーニングにPEATなどのツールを使用し、安全なアニメーションレートの上限やCSSのprefers-reduced-motion実装に関する開発者トレーニングを組み合わせることは、この通達の下で対象組織に求められる運用上の注意義務の最低限の水準を構成します。サードパーティのコンテンツ管理システムや広告システムに依存する組織は、サプライヤーにWCAG 2.3.1への適合を求める契約条項も確保する必要があります。規制上の義務は、一般向けデジタルサービスを運営する組織に帰属するためです。
