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

1秒に3回を超えて点滅するバッジやアイコン

ライブ配信のバッジの赤い点が1秒に4回点滅しています。発作の閾値を超えないほど小さくても、レベルAAAが大きさにかかわらず認める1秒に3回を超えています。

WCAG 2.2
SC 2.3.2AAA
必須とする規格
Section 508、EN 301 549、JIS X 8341-3 では必須ではない
問題あり animation: blink 0.25s steps(1) infinite;
アクセシビリティの問題を示した図: レベルAの基準には小さすぎるが、速い。
01

問題

点滅にとても敏感な人は、1秒に4回点滅する小さな点にも反応することがあります。レベルAの基準を超えないほど小さくても、見ている間ずっと点滅が続きます。

02

試してみる

「ライブ」の点が1秒に何回点滅し、見える範囲のどれだけを占めるかを確かめてください。

カードの下の帯が、点の1秒間を1コマずつ示します。点は2.3.1の基準よりはるかに小さく、満たさないのは回数だけです。「デモを停止」はこの学習ページのボタンで、ショップのものではありません。

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

ライブ

秋のコート:試着と質問コーナー

1秒に4回の閃光 点の1秒間を1コマずつ。

範囲の1%未満を占める 2.3.1が認める4分の1を大きく下回るため、満たさないのは回数だけで、2.3.2の問題です。

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

03

修正方法

点を動かさないか、2秒に1回脈打たせて2回で止めます。

  1. 1大きさにかかわらず、どの1秒間でも点滅は3回まで。
  2. 21回の閃光に1秒以上かけ、点滅は5秒以内に終える。
  3. 3バッジの意味は、点滅ではなく文字で伝える。
修正前 1秒に4回点滅する点
<span class="live-badge"><span class="live-dot"></span>ライブ</span>
修正後

動かない点

<span class="live-badge"><span class="live-dot"></span>ライブ</span>

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

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

04

修正の確認

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

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

4件中0件を確認済み

OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。デザインシステム、アイコンのセット、埋め込んだウィジェットを変更した際は、再度確認します。

制限

このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではなく、医学的な助言でもありません。2.3.2を満たすと、2.3.1よりさらに危険は下がりますが、より遅いちらつきに反応する人もいます。この診断ツールが数えるのは、ページ自身の文書から読み取れる点滅だけで、他のサイトのフレームの中、動画、アニメーション画像、canvasは対象外です。それらには、人の確認と閃光の分析ツールが必要です。

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

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

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

再テストの進め方