WCAG 2.2の達成基準2.3.2「3回以下の閃光」は、1秒間に3回を超えて閃光を放つコンテンツをWebページに含めないことを求めるLevel AAAの基準です。
高速な閃光は光感受性発作を誘発するおそれがあるため、この基準は発作が起きる可能性をさらに下げることを目的としています。
ただし、基準を満たせば発作の可能性が完全になくなるという意味ではありません。
WCAG 2.2の全体像とWebアクセシビリティの基本を先に確認すると、この達成基準の位置づけをつかみやすくなります。
達成基準2.3.2が求めること
閃光とは、明るさが一方向に変化したあと、反対方向へ戻る一組の変化のうち、条件によって発作を引き起こす可能性があるものを指します。
単なる色の変化を一律に数えるのではなく、実際に表示される明暗の変化を確認する必要があります。
「1秒間に3回を超えない」とは、再生中のどの部分を1秒で区切っても、閃光が4回以上にならない状態です。
- 1秒間に許容される閃光は3回までです。
- 4回以上の閃光は、明るさや表示面積にかかわらずLevel AAAの2.3.2を満たしません。
- 動画だけでなく、GIF画像、CSSアニメーション、JavaScriptによる点滅など、ページ内の時間変化を確認します。
Level Aの2.3.1との違い
達成基準2.3.1と2.3.2は、どちらも閃光による発作の可能性を下げるための基準ですが、許容条件が異なります。
| 達成基準 | 適合レベル | 1秒間に3回を超える閃光 | 閃光の強さや面積による扱い |
|---|---|---|---|
| 2.3.1「3回の閃光、又は閾値以下」 | Level A | 原則として避ける | 一般閃光閾値または赤色閃光閾値を下回る場合は許容される |
| 2.3.2「3回の閃光」 | Level AAA | 許容されない | 閾値による例外はない |
つまり、2.3.1では閃光の強さや面積が判断に関わりますが、2.3.2では頻度が3回を超えた時点で基準を満たしません。
両基準を日本の規格とあわせて確認したい場合は、JIS X 8341-3:2016における「発作の防止」と対応方法も参考になります。
実装では閃光を使わない方法を優先する
注意を引く目的で点滅を使っている場合は、まず時間変化のない表現に置き換えられないか検討します。
枠線、背景色、アイコン、見出しなどを組み合わせれば、点滅させずに情報の重要度を伝えられます。
静的な強調へ置き換える例
<div class="notice-emphasis">
重要なお知らせ
</div>
.notice-emphasis {
padding: 1rem;
border: 3px solid #b00020;
background-color: #fff4f4;
color: #222;
font-weight: 700;
}
この例は表示を時間で変化させないため、閃光の頻度を数える必要がありません。
アニメーションが必要な場合
時間変化が情報の理解に必要な場合は、急激な明暗の反転を避け、変化の回数を減らします。
アニメーションの継続時間を長くしただけで適合を断定せず、最終的に表示される動きを確認してください。
動きの目的から設計を見直すときは、Webアクセシビリティに配慮したアニメーションの設計ガイドもご覧ください。
よくある実装ミス
タイマーの間隔だけで閃光回数を判断する
次のように表示と非表示を短い間隔で切り替えるコードは、実際の描画で高頻度の点滅を生じさせるおそれがあります。
setInterval(() => {
const element = document.getElementById('flashElement');
element.style.visibility =
element.style.visibility === 'hidden' ? 'visible' : 'hidden';
}, 200);
注意喚起が目的なら、繰り返し切り替える処理をやめ、静的な強調クラスを一度だけ付ける方法に変更できます。
const element = document.getElementById('flashElement');
element.classList.add('notice-emphasis');
点滅を残す必要がある場合は、コード上の待ち時間ではなく、実際に描画された結果を1秒単位で検証します。
「1秒間に3回以上」と読み替える
基準が禁止しているのは「3回を超える」閃光であり、3回そのものではありません。
実装条件や検査票には「1秒間に3回以下」または「1秒間に3回を超えない」と記載すると、境界を誤解しにくくなります。
フェードなら無条件に安全だと判断する
フェードは急激な点滅を避ける選択肢になりますが、変化の幅、速度、繰り返し方によって最終的な見え方は変わります。
効果の名前だけで判断せず、完成した表示を検証してください。
発作の可能性をゼロにできると説明する
達成基準2.3.2は発作の可能性をさらに下げるための基準であり、すべての人に対する安全を保証するものではありません。
利用者向けの説明でも、「完全に排除する」「ゼロにする」といった絶対表現は避けます。
確認手順
- 対象を洗い出す：動画、GIF画像、CSSアニメーション、JavaScriptによる表示切り替えを一覧にします。
- 目視で候補を絞る：明暗が急に反転する箇所や、短時間に繰り返す演出を見つけます。
- 1秒区間を確認する：再生の途中とループの境目を含め、どの1秒間にも4回以上の閃光がないか確認します。
- 分析ツールで補う：動画やアニメーションはPhotosensitive Epilepsy Analysis Tool（PEAT）などを使って調べます。
- 修正後に再確認する：編集元の素材だけでなく、Webページ上で最終表示を確認します。
目視は疑わしい箇所を見つける助けになりますが、短い変化を正確に数える用途には限界があります。
検査結果には対象、確認方法、修正内容を残しておくと、素材や実装を変更したときに再確認しやすくなります。
実装時に押さえるポイント
- 1秒間に3回を超える閃光を含めません。
- Level AAAの2.3.2では、閃光の強さや表示面積による例外はありません。
- 注意喚起には、枠線や背景色など時間変化のない表現を優先します。
- 動画、画像、CSS、JavaScriptを含む最終表示を確認します。
- 適合は発作の可能性を下げますが、安全を完全に保証するものではありません。
当社では、Webアクセシビリティの導入と継続的な改善を支援するUUU ウェブアクセシビリティを提供しています。
自社サイトのアニメーションや動画をどこから確認すべきか迷っている方は、サービスの詳細をご覧ください。