トピックを検索
1秒に3回を超えて点滅するバッジやアイコン
ライブ配信のバッジの赤い点が1秒に4回点滅しています。発作の閾値を超えないほど小さくても、レベルAAAが大きさにかかわらず認める1秒に3回を超えています。
animation: blink 0.25s steps(1) infinite; 問題
点滅にとても敏感な人は、1秒に4回点滅する小さな点にも反応することがあります。レベルAの基準を超えないほど小さくても、見ている間ずっと点滅が続きます。
ある衣料品のショップは、試着のライブ配信をしています。トップページには、いま配信中のカードがあり、写真、「秋のコート:試着と質問コーナー」というタイトル、角に小さな赤い点が付いた「ライブ」のバッジがあります。配信中であることを示すため、点は赤から白へ、つまりバッジの地に溶けて消え、また赤に戻ることを、1秒に4回、ページを開いている間ずっと繰り返します。同じ速い点滅は、未読メッセージの点、ビデオ通話の録画中の表示、「New」のラベル、通知が届いたときにちらつくベルのアイコン、CSSで描いたタイプライター風のカーソル、文字をちらつかせる「グリッチ」効果などにも見られます。
達成基準2.3.2「3回の閃光」はレベルAAAで、ページのどの部分も、どの1秒間でも3回を超えて点滅させないことを求めます。2.3.1と違い、小さい点滅や暗い点滅の例外はありません。達成基準の解説書は、1秒に3回を超える点滅は一切認めないとし、たとえ1ピクセルの点滅でも満たさないと述べています。この点は2.3.1を満たします。10 × 10ピクセルの点は、2.3.1が基準にする341 × 256ピクセルの範囲の約0.1%で、認められる4分の1を大きく下回ります。しかし、赤から白へ変わって戻るたびに閃光になり、一般閃光と赤色閃光の両方に当たります。それが1秒に4回起きるため、2.3.2は満たしません。また、ほかの内容の横で終わりなく点滅するため、レベルAの2.2.2「一時停止、停止、非表示」も満たしません。
ライブ配信のショッピングは何分も続けて見られるため、点は配信の間ずっと、タイトルや紹介中の商品のすぐそばで見え続けます。レベルAAAのすべてが求められることはまれですが、この部分は、CSSを1行変えるだけで満たせます。
10グループ中2グループに影響
- 全盲 (影響なし)
- 弱視 (影響なし)
- 色覚 (影響なし)
- ろう (影響なし)
- 難聴 (影響なし)
- 発話 (影響なし)
- 手の操作 (影響なし)
- 届く範囲・力 (影響なし)
- 認知 (影響あり)
- 光過敏 (影響あり)
- 光過敏性発作 1秒に4回点滅する点は、発作を起こす点滅の速さの範囲にあります。小ささのため多くの人には危険が低いものの、とても敏感な人には残ります。しかも、配信のページを開いている間ずっと点滅します。
- 言語・認知・学習の能力が限られる 配信のタイトルの横で点滅する点に何度も目を引き戻されるため、注意の障害がある人は、紹介されている商品のどこを見ていたかを見失います。
この診断ツールは、大きさにかかわらず点滅を数えます。すべてのCSSアニメーションとWeb Animations APIのアニメーションを最初の数秒間少しずつ進め、タイマーでクラスを入れ替えるスクリプトも見張り、1秒に3回を超えて点滅するものを、速さと色を添えて2.3.2の問題として報告します。この診断ツール自身の2.3.1の検査も含め、大きさで判断する検査は、小さな点を仕組み上そのまま通します。見つけられるのは、回数を数える検査だけです。一方、他のサイトから埋め込んだ動画プレーヤーやチャットのウィジェットのフレームの中、動画、アニメーションGIF、canvasは見ません。AIツールは、小さな点滅を害のない飾りとして扱いがちです。ネット上の「ライブの点」や「通知の波紋」のサンプルには、4分の1秒や0.5秒のサイクルを使うものがよくあります。
試してみる
「ライブ」の点が1秒に何回点滅し、見える範囲のどれだけを占めるかを確かめてください。
カードの下の帯が、点の1秒間を1コマずつ示します。点は2.3.1の基準よりはるかに小さく、満たさないのは回数だけです。「デモを停止」はこの学習ページのボタンで、ショップのものではありません。
問題あり 修正できますか?
秋のコート:試着と質問コーナー
2.3.1が認める4分の1を大きく下回るため、満たさないのは回数だけで、2.3.2の問題です。
修正方法
点を動かさないか、2秒に1回脈打たせて2回で止めます。
- 1大きさにかかわらず、どの1秒間でも点滅は3回まで。
- 21回の閃光に1秒以上かけ、点滅は5秒以内に終える。
- 3バッジの意味は、点滅ではなく文字で伝える。
<span class="live-badge"><span class="live-dot"></span>ライブ</span>動かない点
<span class="live-badge"><span class="live-dot"></span>ライブ</span>この方法を選ぶ理由:点滅は1秒に3回までにする
点は4分の1秒ごとに赤から白へ跳んで戻るため、1秒に4回点滅し、止まりません。
点は赤のままで、何も点滅しません。バッジにもともとある「ライブ」の文字が配信中であることを伝え、赤い点もひと目で分かる目印として残ります。数えるものも止めるものもないため、2.3.2、2.3.1、2.2.2を満たします。
どちらの方法も2.3.2、2.3.1、2.2.2を満たします。動かない点は、測る必要がなく、後から基準を超えることもありません。動きは手放しますが、意味はもともとと同じく「ライブ」の文字が伝えます。遅い脈動は、数行のCSSで、発作を起こす点滅から十分に離れた速さのまま、ページが開いたときの動きを残せます。デザインが点の動きを求めるときに選びます。どちらも、配信の間ずっと動かし続けることはできません。それには2.2.2の一時停止ボタンが必要になります。1時間変わらない状態は、動かさなくても見えます。
フェードも閃光です。閃光は、明るさが変わって戻る変化のことで、steps() で跳んでも、なめらかに変わっても同じです。大事なのは変化の曲線ではなく、1サイクルの長さです。animation-direction: alternate では1サイクルが閃光の半分になるため、0.25s alternate は1秒に2回、0.125s alternate は4回点滅します。
速い点滅は、誰も点滅だと思わない、ページの小さな部分に隠れています。どれも直し方は同じで、動かさないか、1回の閃光に1秒以上かけます。
- 未読や通知の点:点は動かさず件数を文字で示すか、新しいものが届いたときに遅い脈動を1回だけにします。
- ビデオツールの録画中や配信中の表示:赤のまま動かさず、横に文字を添えます。
- タイピング風の効果のためにCSSで描いたカーソル:1回の点滅に1秒以上かけ、入力が終わったら止めます。
- 文字をちらつかせる「グリッチ」効果:変化を1回にするか、なくします。
- 順番に光る読み込み中の点:それぞれの点のサイクルを1秒以上にし、読み込みが終わったら止めます。
赤は別に数えます。彩度の高い赤への変化と赤からの変化は、明るさがほとんど変わらなくても赤色閃光になります。白を同じ明るさの灰色に替えても解決しません。
他のサイトから埋め込んだプレーヤー、チャットのウィジェット、広告枠は、独自の表示を持ち込みますが、ページの責任の範囲です。手で確認し、点滅を止める設定があれば使います。
大きな範囲の点滅は、より影響が重いレベルAの問題です。発作を誘発するおそれのある点滅するバナーや動画を参照してください。速さにかかわらず、終わらない脈動や光は、止まらずに動き続けるボタンやバッジのアニメーションで扱います。
AI コーディングアシスタントで修正しますか? このガイドを Markdown で取得
修正の確認
マウスを使わない4つの確認
確認方法: 閃光の分析、動きを減らす設定
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。デザインシステム、アイコンのセット、埋め込んだウィジェットを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではなく、医学的な助言でもありません。2.3.2を満たすと、2.3.1よりさらに危険は下がりますが、より遅いちらつきに反応する人もいます。この診断ツールが数えるのは、ページ自身の文書から読み取れる点滅だけで、他のサイトのフレームの中、動画、アニメーション画像、canvasは対象外です。それらには、人の確認と閃光の分析ツールが必要です。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。