本文へ移動
easeweb
ご相談
トピックを検索

発作を誘発するおそれのある点滅するバナーや動画

タイムセールのバナーが、ページの幅いっぱいで1秒に5回、黒と黄色を入れ替えています。光過敏性てんかんのある人に発作を起こしうる速さ、明るさ、大きさです。

WCAG 2.2
SC 2.3.1A
必須とする規格
Section 508 · EN 301 549(EU) · JIS X 8341-3
問題あり animation: strobe 0.2s steps(1) infinite;
アクセシビリティの問題を示した図: バナー全体が黒と黄色で入れ替わる。
01

問題

光過敏性てんかんのある人は、大きく明るいバナーが1秒に5回点滅するのを数秒見ただけで、目をそらす前に発作を起こすことがあります。

02

試してみる

セールのバナーが1秒に何回点滅し、見える範囲のどれだけを占めるかを確かめてください。

このページは1秒に3回を超える点滅を再生しないため、問題のあるバナーは5分の1の速さで点滅させ、下の帯が実際の1秒間を1コマずつ示します。点線の枠は341 × 256ピクセルで、W3Cが見積もる視野10度の範囲です。速い点滅が占めてよいのは、その4分の1までです。「デモを停止」はこの学習ページのボタンで、ショップのものではありません。

問題あり 修正できますか?

タイムセール:全品50%オフ、今夜0時まで

  • ウールのコート $90
  • リネンのシャツ $34
  • キャンバスのトート $22
1秒に5回の閃光 実際のバナーの1秒間。上では5分の1の速さで点滅させています。実際はその5倍の速さです。

点線の枠の1%未満を占める 枠は341 × 256ピクセルで、W3Cが見積もる、目が一度に見る範囲です。この速さの点滅が占めてよいのは4分の1までです。斜線の部分がバナーの占める範囲です。

再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。

03

修正方法

点滅をやめるか、1秒に1回の点滅に遅くして3回で止めるか、速い点滅を小さなバッジだけに収めます。

  1. 1どの1秒間でも点滅は3回まで。超えるなら、視野10度の範囲の4分の1未満に収める。
  2. 2警告、一時停止ボタン、動きを減らす設定のクエリは、解決にならない。
  3. 3動画とアニメーション画像は、公開前に閃光の分析ツールで確認する。
修正前 点滅するバナー
<div class="flash-sale">  <p>タイムセール:全品50%オフ、今夜0時まで</p></div>
修正後

動かないバナー

<div class="flash-sale">  <p>タイムセール:全品50%オフ、今夜0時まで</p></div>

この方法を選ぶ理由:点滅は1秒に3回までにする

AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得

04

修正の確認

マウスを使わない5つの確認

確認方法: 閃光の分析、動きを減らす設定、ズーム

5件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。デザイン、キャンペーンのバナー、動画、アニメーションのライブラリを変更した際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではなく、医学的な助言でもありません。閾値は発作の危険を下げますが、なくすわけではありません。1秒に3回未満の点滅や、2.3.1の対象ではない、縞や格子の動かない模様に反応する人もいます。この診断ツールが測るのはページから読み取れる点滅で、動画、アニメーション画像、canvasは対象外です。また、並んだ小さな点滅を合わせて数えることもしません。ツールが見えない部分は、閃光の分析ツールと人の確認が必要です。

よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。

コードを更新しても、使いやすさを保つために

ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。

再テストの進め方