コンテンツにスキップ
v0.0.1 (β版)

危険な画面の点滅・閃光を防止する

このガイドラインが達成されないとどうなるか

Section titled “このガイドラインが達成されないとどうなるか”

結果的に、一部のユーザーが健康被害を受けるリスクがあり、また発作を恐れてサービスの利用を避けることになります。

具体例：動画コンテンツでの問題

Eさんは光感受性てんかんの既往歴があります。 あるウェブサイトで自動再生される動画に激しいストロボ効果が含まれていました。 警告なく再生されたため、発作を起こしかけて非常に危険な状況になりました。

閃光の基準

Section titled “閃光の基準”

以下のどちらかを満たしていれば安全と考えられます（難しい計算は不要です）。

  1. そもそも速い点滅をさせない：1秒に3回未満の点滅に抑える
  2. どうしても点滅が必要な場合：閃光検出ツール（PEATなど）でチェックし、赤や白の強い点滅が大きな面積で続かないよう修正する

最低限、すぐに取り組めること

Section titled “最低限、すぐに取り組めること”

要件定義

Section titled “要件定義”
  • 機能要件に「1秒間に3回以上の閃光を含まない」を明記する
  • 動画やアニメーションの閃光チェックをレビュープロセスに含める

デザイン

Section titled “デザイン”
  • 激しい点滅を含むアニメーションを避ける
  • 必要な場合は、閃光の頻度を1秒間で3回未満に制限する
  • ストロボ効果や激しい色の変化を避ける

安全なアニメーションの例 

<div class="animation-demo">
  <div class="safe-pulse">
    ゆっくりとした点滅（安全）
  </div>
  <div class="safe-fade">
    フェードイン・アウト（安全）
  </div>
</div>
Open on CodeSandboxOpen Sandbox

開発

Section titled “開発”
  • CSSアニメーションの周期を確認し、1秒間に3回以上の点滅を避ける
  • 動画コンテンツは自動再生を避け、ユーザーが再生を制御できるようにする
  • prefers-reduced-motionメディアクエリを使用してアニメーションを制御する
アニメーションを制御するCSS
/* 通常時のアニメーション */
.animated-element {
  animation: pulse 0.5s infinite;
}


/* モーション軽減を希望するユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
  }
}

QA

Section titled “QA”
  • 目視で閃光の頻度を確認する
  • 画面録画を分析して閃光の頻度を測定する
  • 閃光検出ツールを使用して自動チェックする

リリース後

Section titled “リリース後”
  • ユーザーからの報告を受け付ける仕組みを用意する
  • 閃光に関する問題が報告された場合は、速やかに対応する

よくある問題と解決方法

Section titled “よくある問題と解決方法”

動画コンテンツに閃光が含まれている

Section titled “動画コンテンツに閃光が含まれている”

解決方法

Section titled “解決方法”
  1. 動画の前に警告を表示する
  2. 自動再生を無効にする
  3. 閃光シーンをカットまたは編集する
警告表示の例
<div class="video-warning" role="alert">
  <p>⚠ この動画には激しい光の点滅が含まれています。</p>
  <p>光感受性発作の既往歴がある方はご注意ください。</p>
  <button onclick="playVideo()">理解した上で再生する</button>
</div>
<video id="video" src="video.mp4" controls></video>

ローディングアニメーションが激しい

Section titled “ローディングアニメーションが激しい”

ローディングスピナーやプログレスバーで激しい点滅を使用している場合があります。

<div class="loading-demo">
  <div class="safe-spinner" aria-label="読み込み中">
    <div class="spinner"></div>
    <span>安全なスピナー</span>
  </div>
  <div class="safe-dots" aria-label="読み込み中">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span>安全なドット</span>
  </div>
</div>
Open on CodeSandboxOpen Sandbox

ゲームやインタラクティブコンテンツ

Section titled “ゲームやインタラクティブコンテンツ”

ゲームのエフェクト（爆発、ヒットエフェクトなど）により閃光を引き起こすことがあります。

解決方法

Section titled “解決方法”
  1. 設定画面で「閃光を軽減」オプションを提供する
  2. デフォルトで閃光を軽減した状態にする
  3. ゲーム開始前に警告を表示する
閃光軽減オプションの実装例
// ユーザー設定を確認
const reduceFlashing = localStorage.getItem('reduceFlashing') === 'true';


function playExplosionEffect() {
  if (reduceFlashing) {
    // 閃光を軽減したエフェクト
    playGentleExplosion();
  } else {
    // 通常のエフェクト
    playNormalExplosion();
  }
}

チェックリスト

Section titled “チェックリスト”

知っておくと便利なこと

Section titled “知っておくと便利なこと”

prefers-reduced-motionの活用

Section titled “prefers-reduced-motionの活用”

多くのOSには「モーションを減らす」設定があり、CSSで検出できます。

モーション軽減対応
/* 通常のアニメーション */
.element {
  transition: transform 0.3s ease;
}


/* モーション軽減時はアニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }


  /* または、より穏やかなアニメーションに変更 */
  .animated {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

閃光の検出・分析ツール

Section titled “閃光の検出・分析ツール”

関連するWCAG達成基準

Section titled “関連するWCAG達成基準”

安全なアニメーションのガイドライン

Section titled “安全なアニメーションのガイドライン”
アニメーションの種類推奨される周期注意点
フェードイン・アウト1秒以上急激な変化を避ける
点滅（パルス）2秒以上完全な消灯を避ける
色の変化1秒以上赤色を避ける
スライド・移動制限なし点滅は含まない

参考資料

Section titled “参考資料”

WCAGガイドライン

Section titled “WCAGガイドライン”

技術的リソース

Section titled “技術的リソース”