WCAG 2.2 ガイドライン「2.3.1 3回以下の閃光または閾値以下」Level A について
はじめに
WCAG 2.2の「2.3.1 3回以下の閃光または閾値以下」は、1秒間に3回を超える閃光（フラッシュ）が発生するコンテンツを排除するか、閃光が一般的な閃光と赤閃光の閾値以下であることを求めています。この基準は、特に光感受性発作（光刺激によるてんかん発作）のリスクを減らすために設けられています。
1. 基準の概要
要件
- 1秒間に3回を超える閃光を含まない。
- 閃光が発生する場合は、一般的な閃光と赤閃光の閾値以下である。
注意点
- この基準は、ページ全体のコンテンツに適用されます。
- すべてのコンテンツがこの基準を満たさない場合、ユーザーがページ全体を利用できなくなるリスクがあります。
2. 実装方法
a. 閃光を発生させない
閃光効果を抑えたアニメーション例
HTML
<div id="safeAnimation" style="width: 100px; height: 100px; background-color: blue;"></div>
CSS
@keyframes safeBlink {
0%, 100% { background-color: blue; }
50% { background-color: lightblue; }
}
#safeAnimation {
animation: safeBlink 2s infinite;
}
- このアニメーションは、1秒間に1回しか色を変えないため、安全です。
b. 閃光のエリアを小さくする
閃光エリアが小さい場合、光刺激の影響を軽減できます。
小さなエリアでのアニメーション例
HTML
<div id="smallFlash" style="width: 20px; height: 20px; background-color: red;"></div>
CSS
@keyframes smallFlash {
0%, 100% { background-color: red; }
50% { background-color: darkred; }
}
#smallFlash {
animation: smallFlash 3s infinite;
}
c. 閃光の閾値を測定する
測定ツールの使用
- 専用のツールを使用して、コンテンツが以下の閾値を超えないことを確認します：
- 一般的な閃光閾値。
- 赤閃光閾値。
3. 閃光閾値について
一般的な閃光閾値
- 閃光の明るさが急激に増減し、その変化が大きい場合、一般的な閃光閾値に達する可能性があります。
赤閃光閾値
- 赤色成分が多く含まれる閃光は、特に光感受性発作のリスクが高いため、厳密な制限があります。
4. よくある失敗例とその改善策
a. 1秒間に3回を超える閃光を含む
失敗例
@keyframes unsafeBlink {
0%, 100% { background-color: red; }
25%, 75% { background-color: white; }
}
#unsafeAnimation {
animation: unsafeBlink 0.5s infinite;
}
改善策
- アニメーション速度を1秒間に3回未満に変更します。
- 色の変化を緩やかにする。
b. 閃光エリアが大きすぎる
失敗例
#largeFlash {
width: 500px;
height: 500px;
background-color: red;
animation: unsafeBlink 0.5s infinite;
}
改善策
- エリアを小さくする。
- または、アニメーションを完全に削除する。
5. アクセシビリティのメリット
a. 光感受性発作のリスクを軽減
- 特定の閃光が光感受性発作を誘発するリスクを大幅に減らします。
b. 安全なウェブ体験を提供
- すべてのユーザーに対して安心して利用できるウェブコンテンツを提供します。
c. ユーザー満足度の向上
- アクセシビリティに配慮することで、ユーザーの信頼と満足度が向上します。
6. テスト方法
a. 手動テスト
- アニメーションや動画の閃光が1秒間に3回を超えないことを確認。
- 明るさの変化が緩やかであることを確認。
b. 自動テストツール
- 専用のツール（例: Photosensitive Epilepsy Analysis Tool）を使用して、一般的な閃光閾値と赤閃光閾値を検証。
まとめ
WCAG 2.2の「2.3.1 3回以下の閃光または閾値以下」は、光感受性発作のリスクを防ぐため、閃光の頻度や強度を制限する基準です。
実装ポイント
- 1秒間に3回を超える閃光を避ける。
- 閃光エリアを小さく抑える。
- 専用ツールで閾値以下であることを確認する。
これらを実践することで、すべてのユーザーにとって安全で快適なウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。