Webサイトの光過敏性発作リスク検査：画面録画で検証するWCAG 2.3.1 / JIS X 8341-3適合ガイド

Webアクセシビリティへの対応は、テキストのコントラスト比やキーボード操作の確保にとどまりません。W3CのWeb Content Accessibility Guidelines (WCAG) 2.2および日本産業規格 **JIS X 8341-3 達成基準 2.3.1「3回の閃光、または閾値以下」**では、光過敏性てんかんの発作を誘発する恐れのある点滅アニメーションや動画演出の排除が明確に義務付けられています。

Webコンテンツはユーザー操作に応じて動的に変化するため、静止した動画とは異なる検査手法が求められます。本記事では、画面録画を活用してWebサイト上のアニメーションをキャプチャし、無料のVideo Auditツールで検証する実践手順を解説します。

図2: 静的な動画検査をすり抜けやすい、Web固有の動的インタラクションの例

#なぜWebコンテンツに専用の閃光検査が必要なのか

書き出し後の変更がない動画ファイルと異なり、Webサイトは常に動的に変化します。WCAG 2.3.1の安全基準に抵触しやすい代表的なWeb要素には以下のようなものがあります：

#危険な点滅の見分け方

大面積で急激な輝度変化が生じていないかを確認します。単なるテキスト入力時の小さなカーソル点滅であれば問題ありませんが、画面上の広い領域（標準的な表示環境における $341 \times 256$ ピクセル領域の25%以上）で明暗の相対輝度が10%以上変化し、それが1秒間に3回を超えると基準違反となります。

こうしたアニメーションは実際のブラウザ上で動作するため、まず画面録画を行って動画ファイル化し、検査ツールで判定します。

#デスクトップ表示とモバイル表示の違い

レスポンシブデザインでは、画面幅によって各要素の占有面積が大きく変わります。必ず両方の表示サイズで検証してください。

• スマートフォン表示: 小さな画面では要素が縦に積み重なります。PC上では画面の片隅にあった小さな点滅バナーが、スマホ画面では画面全体の大部分を覆い、容易に25%の面積制限を超過します。
• デスクトップ表示: 横幅いっぱいに広がるヒーロー動画やワイドスライダーは、高解像度モニター上で極めて大きなピクセル面積を占めます。

対象コンポーネントの画面占有率が最も大きくなるレイアウトを録画して検査することが原則です。

#典型的なWeb違反事例と修正アプローチ

#事例1：アニメーションGIF広告バナー

白背景と暗い背景が高速で切り替わるマーケティング用バナー。

• 問題のトリガー: 背景色が急激に反転するループアニメーション。
• 違反判定: 大きなバナー領域で1秒間に3回を超える明暗の反転が発生し、WCAG 2.3.1に違反。
• 修正方法: アニメーションの切り替え間隔を長くし、点滅頻度を毎秒3回未満に抑えるか、フェード効果で明暗差を緩和。

#事例2：管理画面の通知アラートバッジ

ユーザーの注意を引くために高輝度の白と深い赤色で点滅するバッジ。

• 問題のトリガー: 赤色と白色の急激な色反転。
• 違反判定（危険モード）: 1秒間に3回を超える高周波の明滅により、赤色閃光の基準値を超過。
• 修正方法（適合モード）: 点滅速度を緩やかにし、1秒間に1〜2回の明滅に抑える。

#事例3：ヒーローセクションの自動再生背景動画

Webサイトのファーストビューでループ再生される背景映像。

• 問題のトリガー: 屋外の強い太陽光シーンと暗い室内のシーンが激しいカット割りで連続する。
• 違反判定: 画面の半分以上を占める大面積で、10%以上の輝度差を持つカットが1秒間に4回以上発生。

#事例4：動きの抑制設定（prefers-reduced-motion）への対応

OSのアクセシビリティ設定で「視覚効果を減らす」を選択しているユーザーに対する配慮。

• 問題のトリガー: ユーザーが動きの停止を希望しているにもかかわらず、激しい背景動画が自動再生される。
• 修正方法: CSSのメディアクエリ @media (prefers-reduced-motion: reduce) を検知し、アニメーションの停止や静止画への差し替えを行う。

#ステップ1：Webサイトの画面録画を作成する

Webページ上の疑わしいアニメーションやユーザー操作の流れを録画します。

#高精度な検査録画のための注意点：

1. 録画範囲の設定: ブラウザウィンドウ全体を録画することを推奨します。WCAGの基準は視野角10度（標準視聴環境での $341 \times 256$ ピクセル）に基づいているため、画面全体における実際の占有率を計測することが重要です。
2. フレームレートの確保: 最低でも 30fps で録画してください。15fpsなどの低いフレームレートで録画すると、高周波の点滅がコマ落ちし、誤って合格と判定される（偽陰性）危険があります。
3. 高画質設定: 過度な動画圧縮を避けてください。圧縮アーティファクトによって輪郭がぼやけると、本来の輝度変化が正しく計算されなくなります。
4. 録画の実施:
   • 自動再生動画やGIF: ループが一巡するまで、少なくとも5〜10秒間録画します。
   • 通知バッジやUI演出: 実際に点滅している状態を録画します。
   • 動きの抑制設定: prefers-reduced-motion 有効時と無効時の挙動をそれぞれ確認します。

#ステップ2：Video Auditで動画を解析する

録画した動画ファイルを Video Audit 無料ツール でスキャンします。

1. ファイルを選択: 録画したMP4またはWebMファイルをアップロードエリアにドラッグ＆ドロップします。
2. WCAG 2.2 基準を選択: 検査基準として WCAG（達成基準2.3.1準拠）が選択されていることを確認します。
3. 解析を実行: 「動画を解析」をクリックします。ブラウザ内でWebAssemblyエンジンが高速にフレームを展開し、ピクセル単位の時系列解析を行います。

#ステップ3：解析結果を確認し違反箇所を特定する

解析によって違反が検出された場合、結果画面からページ内のどの要素が原因であるかを特定します。

図3: フラッシュゾーンのオーバーレイを用いて問題のUI要素を特定

#1. タイムコードの確認

タイムライン上の波形グラフで警告が表示されている箇所を確認します。「輝度フラッシュ（明暗の激しい変化）」なのか「赤色フラッシュ（彩度の高い赤色の急変）」なのかを把握します。

#2. フラッシュゾーンで要素を特定

プレビュー画面上に表示される黄色や赤色のバウンディングボックス（フラッシュゾーン）を確認します。ブラウザ画面全体を録画していれば、どのバナー、GIF、ボタンが原因であるかが一目で分かります。

#3. 面積比率の確認

ログに表示される危険領域の面積比率を確認します。占有率が基準値（25%）を超えている場合、該当コンポーネントの表示サイズやコントラストの調整が必要です。

#Webサイトにおける違反の修正方法

検査で基準違反となった場合でも、アニメーションを完全に削除する必要はありません。以下のデザイン調整で安全基準を満たすことができます：

• コントラスト差の緩和: 白と黒のような極端な明暗の切り替えを避け、中和色を用いたり、短いフェード効果を加えて輝度の立ち上がりを滑らかにします。
• 点滅速度の減速: ローディングスピナーや通知バッジの点滅周期を長くし、1秒間に3回未満のゆっくりとしたパルス運動にします。
• 再生・停止ボタンの設置: 自動再生されるカルーセルや背景動画には、ユーザーがいつでも一時停止できる操作ボタンを提供します。
• prefers-reduced-motion の実装: OS設定でモーション抑制を有効にしているユーザーに対して、激しいアニメーションを自動的に静止状態へ切り替えます。

#まとめ：継続的なアクセシビリティ検証体制へ

単発のランディングページであれば手動の画面録画検査で十分に対応できますが、更新頻度が高くページ数の多いWebアプリケーションでは、自動化されたテスト体制が不可欠です。

Video AuditのEnterprise APIやCLIランナーを活用すれば、PlaywrightやCypressなどのE2Eテストパイプラインに動画点滅検査を組み込み、デプロイ時にアクセシビリティ違反を自動検知することが可能です。

#よくある質問（FAQ）