WCAG 2.2 ガイドライン「2.3.2 3回以下の閃光」Level AAA について
はじめに
WCAG 2.2の「2.3.2 3回以下の閃光」では、1秒間に3回を超える閃光（フラッシュ）が発生するコンテンツを排除することを求めています。この基準は、光感受性発作（特に光刺激によるてんかん発作）のリスクを完全に排除することを目的としています。
1. 基準の概要
要件
- ウェブページには、1秒間に3回を超える閃光を含むコンテンツを配置しない。
違い（2.3.1との比較）
- Level Aの「2.3.1」: 1秒間に3回を超える閃光を制限しつつ、閃光の強度が「一般的な閃光閾値」または「赤閃光閾値」を下回っていれば許可。
- Level AAAの「2.3.2」: 1秒間に3回を超える閃光がいかなる場合でも許されない。
2. 実装方法
a. 閃光の頻度を制御する
安全なアニメーションの実装例
HTML
<div id="safeFlash" style="width: 100px; height: 100px; background-color: blue;"></div>
CSS
@keyframes safeBlink {
0%, 100% { background-color: blue; }
50% { background-color: lightblue; }
}
#safeFlash {
animation: safeBlink 2s infinite; /* 1秒間に1回未満の色変更 */
}
この例では、アニメーションが2秒に1回しか変化しないため、1秒間に3回以上の閃光を発生させるリスクはありません。
b. アニメーション速度を調整する
既存のアニメーションが1秒間に3回以上の閃光を発生させている場合、速度を調整して頻度を下げます。
頻度を減らしたアニメーション例
修正前
@keyframes fastBlink {
0%, 100% { background-color: red; }
50% { background-color: white; }
}
#fastFlash {
animation: fastBlink 0.5s infinite; /* 1秒間に4回の閃光が発生 */
}
修正後
@keyframes slowBlink {
0%, 100% { background-color: red; }
50% { background-color: white; }
}
#safeFlash {
animation: slowBlink 2s infinite; /* 1秒間に1回未満 */
}
c. 閃光を完全に排除する
可能であれば、閃光を含む効果を他の手法で置き換えます。
代替方法：フェードイン・フェードアウトを使用
HTML
<div id="fadeEffect" style="width: 100px; height: 100px; background-color: red;"></div>
CSS
@keyframes fadeInOut {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
#fadeEffect {
animation: fadeInOut 3s infinite; /* 徐々に明るさが変化 */
}
3. よくある失敗例とその改善策
a. 高頻度の閃光を含むコンテンツ
失敗例
@keyframes unsafeBlink {
0%, 100% { background-color: red; }
25%, 75% { background-color: white; }
}
#unsafeFlash {
animation: unsafeBlink 0.5s infinite; /* 1秒間に4回の閃光が発生 */
}
改善策
- アニメーション速度を変更し、1秒間に3回未満に抑える。
- または、他の視覚効果（例: フェード）で置き換える。
b. JavaScriptでの高頻度点滅
失敗例
setInterval(() => {
const element = document.getElementById('flashElement');
element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
}, 200); // 200msごとに点滅（1秒間に5回）
改善策
setInterval(() => {
const element = document.getElementById('flashElement');
element.style.visibility = element.style.visibility === 'hidden' ? 'visible' : 'hidden';
}, 1000); // 1秒間に1回以下の点滅
4. アクセシビリティのメリット
a. 光感受性発作のリスクを完全に排除
- 高頻度の閃光は、光感受性発作を誘発する可能性が高いため、そのリスクを完全に排除できます。
b. 安全で快適なウェブ体験を提供
- 閃光を避けることで、すべてのユーザーが安心してコンテンツを利用できます。
c. ユーザー満足度の向上
- 特定のニーズを持つユーザーに配慮することで、信頼性の高いウェブサイトを構築できます。
5. テスト方法
a. 手動テスト
- 動的コンテンツやアニメーションの閃光を目視で確認。
- 閃光が1秒間に3回を超えないことを検証。
b. 自動テストツール
- Photosensitive Epilepsy Analysis Tool などのツールを使用して、閃光の頻度を測定。
まとめ
WCAG 2.2の「2.3.2 3回以下の閃光」は、1秒間に3回を超える閃光を完全に排除することで、光感受性発作のリスクをゼロにすることを目指しています。
実装ポイント
- アニメーションの頻度を調整し、1秒間に3回未満に抑える。
- 必要に応じて閃光をフェード効果などの代替手法に置き換える。
- ツールを使用して、閃光の頻度を測定し基準を満たしていることを確認する。
これにより、すべてのユーザーにとって安全で快適なウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。