トピックを検索
発作を誘発するおそれのある点滅するバナーや動画
タイムセールのバナーが、ページの幅いっぱいで1秒に5回、黒と黄色を入れ替えています。光過敏性てんかんのある人に発作を起こしうる速さ、明るさ、大きさです。
animation: strobe 0.2s steps(1) infinite; 問題
光過敏性てんかんのある人は、大きく明るいバナーが1秒に5回点滅するのを数秒見ただけで、目をそらす前に発作を起こすことがあります。
ある衣料品のショップが1日限りのセールをしています。トップページの上部には、幅いっぱいのバナーに「タイムセール:全品50%オフ、今夜0時まで」とあり、勢いを出すためにバナーが点滅しています。黒地に黄色の文字と、黄色地に黒の文字が1秒に10回入れ替わり、暗い状態と明るい状態を1秒に5回往復します。ページを読み込むと始まり、開いている間ずっと続きます。同じ問題は、見出しの「グリッチ」効果、自動で再生されるゲームや製品の予告動画のストロボ演出、キャンペーンの稲妻のGIF、画面全体を赤く点滅させるエラー表示などでも起きます。
達成基準2.3.1「3回の閃光、又は閾値以下」は、1秒間に3回を超える閃光を、一般閃光と赤色閃光の閾値を下回る場合にだけ認めています。一般閃光は、白を1としたときに相対輝度が0.1以上変わり、暗い側が0.80未満である、逆向きの変化の組です。赤色閃光は、彩度の高い赤への変化と赤からの変化の組です。閾値を超えるのは、点滅が視野10度の範囲の4分の1を超えて占めるときで、W3Cはこの範囲を341 × 256 CSSピクセルと見積もっています。このバナーは、すべての点で超えています。黒の相対輝度はほぼ0、黄色は約0.68なので、入れ替わるたびに一般閃光になります。点滅は1秒に5回で、ページの幅いっぱい、高さ110ピクセルのバナーは、この範囲の約43%を占めます。2.3.1は、ページ上のすべての内容に適用される数少ない達成基準です。W3Cは適合要件5「非干渉」で、基準を満たす別のバージョンがある内容にも適用されるとしています。別のバージョンを選ぶ前に、点滅が人に届いてしまうからです。
てんかんのある人の約3%が光過敏性で、その多くは7歳から19歳の間に発症します。発作を起こしたことがない人には、自分が光過敏性だと知る手がかりがありません。また、ショップのトップページは、スマートフォンを顔に近づけて見ることも多く、そうするとバナーが見える範囲のさらに多くを占めます。
10グループ中2グループに影響
- 全盲 (影響なし)
- 弱視 (影響なし)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 届く範囲・力 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響あり)
- 光過敏性発作 見える範囲の多くで、明るいバナーが1秒に5回、黒と黄色を入れ替えるのは、発作を最も起こしやすい速さの範囲です。しかもページの読み込みとともに始まるため、目をそらしたり操作を探したりする前に起きます。
- 言語・認知・学習の能力が限られる ページの上で光り続ける点滅に何度も目を引き戻されるため、注意の障害がある人は、その下の商品や価格に集中できません。
この診断ツールは、ページから読み取れる点滅を測ります。すべてのCSSアニメーションとWeb Animations APIのアニメーションを最初の数秒間、少しずつ進めて色を読み、タイマーでクラスを入れ替えるスクリプトも見張ります。そのうえで、どの1秒間の点滅の回数も数え、341 × 256の範囲に対する面積を測ります。上のバナーは、速さ、色、大きさを添えて問題として報告します。一方、動画、アニメーションGIF、Lottieファイル、canvasの中は見えず、写真の上で点滅するバナーの明るさも分かりません。それらには閃光の分析ツールが必要です。axeやリンターには、点滅のルール自体がありません。AIツールは、点滅するバナーに対して、動きを減らす設定のクエリで囲むか、一時停止ボタンを加えることが多く、どちらも基準を満たしません。ネット上の「タイムセール」や「グリッチ文字」のサンプルには、0.1秒の steps() を使うものが多く、AIが書くCSSもこの問題を一緒に持ち込みがちです。
試してみる
セールのバナーが1秒に何回点滅し、見える範囲のどれだけを占めるかを確かめてください。
このページは1秒に3回を超える点滅を再生しないため、問題のあるバナーは5分の1の速さで点滅させ、下の帯が実際の1秒間を1コマずつ示します。点線の枠は341 × 256ピクセルで、W3Cが見積もる視野10度の範囲です。速い点滅が占めてよいのは、その4分の1までです。「デモを停止」はこの学習ページのボタンで、ショップのものではありません。
問題あり 修正できますか?
タイムセール:全品50%オフ、今夜0時まで
- ウールのコート $90
- リネンのシャツ $34
- キャンバスのトート $22
枠は341 × 256ピクセルで、W3Cが見積もる、目が一度に見る範囲です。この速さの点滅が占めてよいのは4分の1までです。斜線の部分がバナーの占める範囲です。
修正方法
点滅をやめるか、1秒に1回の点滅に遅くして3回で止めるか、速い点滅を小さなバッジだけに収めます。
- 1どの1秒間でも点滅は3回まで。超えるなら、視野10度の範囲の4分の1未満に収める。
- 2警告、一時停止ボタン、動きを減らす設定のクエリは、解決にならない。
- 3動画とアニメーション画像は、公開前に閃光の分析ツールで確認する。
<div class="flash-sale"> <p>タイムセール:全品50%オフ、今夜0時まで</p></div>動かないバナー
<div class="flash-sale"> <p>タイムセール:全品50%オフ、今夜0時まで</p></div>この方法を選ぶ理由:点滅は1秒に3回までにする
steps(1) は、黒から黄色へ、黄色から黒へ、0.1秒ごとに途中の色を挟まずに切り替えます。画面の大きな部分で、暗い状態と明るい状態が1秒に5回、終わりなく入れ替わります。
何も変わらないため、点滅はなく、測るものもありません。バナーはセールの色のまま、明るい黄色に黒の文字で、上下に太い黒の縁があり、ページで最も明るいものとして目立ちます。2.3.2と2.2.2も、気にかけることなく満たします。
どの方法も2.3.1を満たします。動かないバナーは、測る必要がなく、点滅と動きに関するすべての達成基準を満たします。代わりに点滅そのものを手放すため、色と大きさで目を引く必要があります。1秒に1回の点滅は、値を2つ変えるだけで、発作がまれな速さのまま、ページが開いたときの点滅を残せます。依頼に動きが含まれるときに選びます。小さなバッジは速い点滅を残せますが、小さく単独である間しか満たさず、2.3.2は満たしません。変えられないブランド表現として速い点滅が求められるときだけ選び、変えられるようになったら遅くします。
閃光は組で数えます。明るくなって戻るのが1回の閃光なので、1回のサイクルで行きと帰りが1回ずつ変わるアニメーションは、animation-duration ごとに1回点滅します。animation-direction: alternate では、1サイクルが閃光の半分になるため、0.2s alternate は1秒に2.5回点滅します。すべてのサイクルを1秒以上にすれば、数える心配は要りません。
直したように見えて、直っていない方法があります。どれも、誰かにとって点滅が残ります。
- ページや動画の前の発作の警告:読むころには点滅が画面に出ています。また、発作を起こしたことがない人には、警告を気に留める理由がありません。
- 一時停止ボタンや停止ボタン:W3Cは、多くの人が止めるより早く発作が起きうるため、点滅を止められるようにすることは解決にならないとしています。
- 動きを減らす設定のクエリだけ:光過敏性てんかんのある人の多くは、その設定をしていません。動きを
no-preferenceの中に書くのは、安全な速さに加えてであり、代わりではありません。
明るい2色の間の変化は、暗い側の相対輝度が0.80以上なら一般閃光ではありません。淡い黄色がさらに淡い黄色にちらつくような場合です。理屈の上では満たしますが、次にブランドの色が変わると崩れることがあります。また、彩度の高い赤への変化と赤からの変化は、明るさが変わらなくても赤色閃光として数えます。赤を別に数えるのは、赤の点滅が特に発作を起こしやすいためです。1997年には、赤と青の点滅を含むアニメの放送で、日本の数百人の視聴者が病院に運ばれました。淡い色のちらつきも小さなバッジと同じように扱い、ツールで確認します。
動画、アニメーションGIF、Lottieファイル、canvasのアニメーションは、点滅がコマの中にあるため、CSSでは直せません。ページで表示される大きさで、閃光の分析ツールにかけます。Trace Centerが無料で配布しているWindows用のPEATや、EAが公開している、動画の輝度の閃光、赤色閃光、パターンを調べるオープンソースのライブラリIRISがあります。そのうえで編集を直します。ストロボの部分を切るか、遅くするか、暗くするか、画面の中で小さくします。他社の広告や埋め込みも対象です。2.3.1は、ページ上のすべての内容に適用されるためです。
セールのページで動くのは、点滅だけではありません。止まらずに脈打ったり光ったりするバナー、ティッカー、カウントダウンには、それぞれ別のガイドがあります:止まらずに動き続けるボタンやバッジのアニメーション、一時停止できない、流れる文字、カルーセル、アニメーション。小さなバッジや点が速く点滅する問題は、1秒に3回を超えて点滅するバッジやアイコンで扱います。
AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得
修正の確認
マウスを使わない5つの確認
確認方法: 閃光の分析、動きを減らす設定、ズーム
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。デザイン、キャンペーンのバナー、動画、アニメーションのライブラリを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではなく、医学的な助言でもありません。閾値は発作の危険を下げますが、なくすわけではありません。1秒に3回未満の点滅や、2.3.1の対象ではない、縞や格子の動かない模様に反応する人もいます。この診断ツールが測るのはページから読み取れる点滅で、動画、アニメーション画像、canvasは対象外です。また、並んだ小さな点滅を合わせて数えることもしません。ツールが見えない部分は、閃光の分析ツールと人の確認が必要です。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
参考資料
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。