トピックを検索
一時停止できない、流れる文字やアニメーション
お知らせバーのメッセージが横に流れ続けるか、数秒ごとに切り替わり続け、止める方法はマウスポインターを上に置き続けることだけです。
animation: ticker 30s linear infinite; 問題
動く文字を読めない人や、動きから目を離せない人は、マウスを使わずに、流れるお知らせを止める方法がありません。
あるリネンのショップでは、すべてのページの上部に細いお知らせバーがあります。送料無料の条件、秋のセール、新作のシャツという3つのメッセージが一列につながって横に流れ、ページを開いている間ずっと繰り返します。マウスポインターをバーの上に置くと止まりますが、ポインターを離すとすぐにまた動き出します。止めるボタンはなく、キーボードで操作できるものもありません。同じバーを、小さなスライダーにしているショップも多くあります。メッセージを1件ずつ表示し、4秒ごとに切り替え、両端に矢印があります。矢印でメッセージを送れますが、自動の切り替えは続き、止められるのはやはりマウスポインターを上に置いている間だけです。
達成基準2.2.2「一時停止、停止、非表示」は、自動で始まり、5秒を超えて続き、ほかの内容と並んで表示される、動く、点滅する、スクロールする情報に適用されます。このバーは3つの条件をすべて満たすため、利用者が一時停止、停止、非表示にできる仕組みが必要です。ホバーでの一時停止はその仕組みになりません。マウスが必要で、ポインターを置いている間しか止まらず、キーボード、タッチ、音声操作の利用者には何もできません。達成基準の解説書も、フォーカスがある間だけ止まるアニメーションは、利用者を動く内容に縛り付けるため、一時停止の仕組みにはならないとしています。失敗例F16は、一時停止できないスクロールする内容を、達成基準を満たさない例として挙げています。スライダーの矢印も、その仕組みにはなりません。メッセージは変わりますが、自動の切り替えは止まりません。
バーはすべてのページの上部にあるため、動きはショップのどこへ行ってもついてきます。スマートフォンでは、最初に目が向く場所でもあります。
10グループ中3グループに影響
- 全盲 （影響なし）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 言語・認知・学習の能力が限られる ページの端の動きに何度も目が引き戻されるため、注意の障害がある人は隣の内容に集中できません。読むのに時間がかかる人は、読み終える前にメッセージが流れていきます。
- 視覚が限られる 画面拡大ソフトでは、バーの一部しか見えず、読む前に文字が表示範囲から流れ出ます。一語ずつ目で追う必要がある弱視の人は、動く文字についていけません。
- 手の操作が限られる 止める方法がマウスでのホバーだけのため、キーボード、スイッチ、音声操作の利用者は止められません。タッチ画面では、ホバーを保つ方法がありません。
この診断ツールは、終わりなく続くCSSアニメーションをすべて見つけて、人が確認する項目として挙げますが、流れるお知らせと、ゆっくり点滅する小さな点を区別できません。ページの別の場所にある一時停止ボタンも見えません。多くのカルーセルやティッカーのライブラリのように、スクリプトが1コマずつ動かす表示は、CSSアニメーションとしては現れません。axeは古い <marquee> 要素を報告しますが、今もすべてのブラウザーで流れるこの要素を置き換えたCSSは報告しません。AIの修正は、:hover と :focus-within に animation-play-state: paused を加えることがよくあります。止まったように見えますが、ポインターやフォーカスがバーにある間しか止まりません。動きを減らす設定のときだけアニメーションを止めて終える修正も、その設定を見つけた人にしか効果がありません。タイマーでメッセージを切り替えるスライダーには、動いているアニメーションがまったくありません。多くのテーマがお知らせバーに付けている data-autoplay="true" がある場合と、自動再生がオンのSwiperの場合だけ、診断ツールは確認項目として挙げます。
試してみる
動くお知らせを、まずマウスで、次にTabキーで止めてみてください。
ホバーで止まるのはポインターを置いている間だけで、Tabキーでは止めるものが見つかりません。「問題2」はスライダー版です。矢印でメッセージは変わりますが、自動の切り替えは続きます。「デモを停止」はこの学習ページのボタンで、ショップのものではありません。
問題あり 修正できますか？
- 50ドル以上のご注文で送料無料
- 秋のセール：10月31日まで最大30%オフ
- 新作：5色のリネンシャツ
季節を選ばないリネン
やわらかく洗いをかけ、長く使えるように織り、少量ずつ作っています。
シャツを見る再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
お知らせを動かさずに表示するか、前へ・次へのボタンで1件ずつ表示するか、押すと止まってすべてのメッセージが表示される一時停止ボタンを付けます。
- 1自動で5秒を超えて動くものには、そばに止めるボタンを置く。
- 2ホバーやフォーカスでの一時停止は補助であり、止める手段にはしない。
- 3止まった状態では、すべてのメッセージを、そのまま、またはボタン1回で読める。
html
<div class="ticker"> <div class="ticker-track"> <ul> <li>50ドル以上のご注文で送料無料</li> <li>秋のセール：10月31日まで最大30%オフ</li> <li>新作：5色のリネンシャツ</li> </ul> <!-- 途切れずにループさせるための、同じ3つのメッセージ。 --> <ul aria-hidden="true">…</ul> </div></div>html
<!-- または、同じメッセージを1件ずつ表示するスライダー。 --><div class="notice-bar"> <button type="button" class="notice-prev"> <svg aria-hidden="true" focusable="false"><use href="#icon-previous"></use></svg> <span class="visually-hidden">前のお知らせ</span> </button> <ul class="notices"> <li>50ドル以上のご注文で送料無料</li> <li hidden>秋のセール：10月31日まで最大30%オフ</li> <li hidden>新作：5色のリネンシャツ</li> </ul> <button type="button" class="notice-next"> <svg aria-hidden="true" focusable="false"><use href="#icon-next"></use></svg> <span class="visually-hidden">次のお知らせ</span> </button></div>メッセージを動かさない
<ul class="notices"> <li>50ドル以上のご注文で送料無料</li> <li>秋のセール：10月31日まで最大30%オフ</li> <li>新作：5色のリネンシャツ</li></ul>どちらのバーも、ページの読み込みとともに動き始め、終わることがありません。止める方法は、ティッカーの :hover の指定か、スライダーの mouseenter によるホバーだけのため、マウスが必要で、ポインターを離すとすぐにまた動き出します。スライダーの矢印でメッセージは変わりますが、自動の切り替えは続きます。
何も動かないため、2.2.2で求められることはなく、操作を探す必要もありません。メッセージは一度だけ書くため、隠した複製を合わせる手間もありません。狭い画面では、端からはみ出さずに2行目、3行目へ折り返します。その分スマートフォンではバーが高くなるため、メッセージは必要なものに絞ります。
どの方法も2.2.2を満たします。動かさない方法は、ボタンもスクリプトも不要で、誰でもすべてのメッセージを読めます。ただし、デザインの動きはなくなり、スマートフォンではバーが2〜3行になることがあります。1件ずつ表示する方法は、どの画面でもバーを1行に保てます。その代わり、2つのボタンと少しのスクリプトが必要で、2件目以降は「次へ」を押した人にしか見えません。一時停止ボタンは、デザインの前提である動きを残せます。その代わり、ボタンと少しのスクリプトが必要で、利用者がボタンを見つけるまでは誰に対しても動き続けます。メッセージが収まるなら動かさない方法を、場所が限られるなら1件ずつ表示する方法を、動きがブランドの一部なら一時停止ボタンを選びます。
ホバーでの一時停止は、メッセージを読んでいるマウス利用者には親切なため、残してもかまいません。ただし、止める仕組みにはなりません。バーにフォーカスがある間だけ止まる方法も同じです。達成基準の解説書は、フォーカスが動く内容にある間しか続かない一時停止を認めていません。
一時停止ボタンの方法のように、動きを減らす設定のもとで止まった状態から始めるのは、設定している人には役立ちますが、ボタンの代わりにはなりません。動きで気が散る人の多くはその設定を知らず、設定を変えられないパソコンを使っている人もいます。2.2.2が求めているのは、ページ上の仕組みです。最初の状態はメディアクエリではなくスクリプトで決めるため、ボタンとバーの状態は常に一致します。再生ボタンを押すことは、動きを見たいという利用者自身の求めです。
一時停止ボタンはアイコンボタンのため、アイコンボタンに必要なことはすべて満たします。隠したテキストか aria-label による名前、バーの背景に対して3:1のコントラストがあるアイコン、24×24ピクセル以上の大きさ、見えるフォーカス表示、一緒に切り替わるアイコンと名前です。ボタンは最後のメッセージの後ではなく、動く内容の前に置きます。選んだ状態は sessionStorage などで訪問中保ち、ページを移るたびにバーが動き出さないようにします。
途切れずにループさせるための複製には aria-hidden="true" が必要です。ないと、スクリーンリーダーはすべてのメッセージを2回読みます。メッセージがリンクの場合は、代わりに inert を使い、複製をTabの順序からも外します。フォーカスできるリンクに aria-hidden を付けると、何も読まれないTabの移動先が残ります。
5秒以内に自然に止まる動きには、操作は不要です。登場時のアニメーションや、数回だけループするように書き出したアニメーションGIFは、5秒以内に終われば満たします。ティッカーは、メッセージを見せながらこの条件を満たすことはできないため、上のいずれかの方法が必要です。
スライダーのタイマーを残す場合は、切り替わっている間はメッセージのリストを aria-live="off" に、止めた後は "polite" にします。そうしないと、切り替わるたびにスクリーンリーダーの読み上げが中断されます。
バーを閉じるボタンで非表示にする方法も、2.2.2の「一時停止、停止、非表示」のうちの非表示として満たします。補助としては良い方法ですが、それだけでは、送料やセールの情報を最も必要とする人に、動く文字を読むか、まったく読まないかの選択しか残りません。
ほかの内容と並んで自動で動くものには、どこでも同じ問題が起きます。どれも、動かさないか、そばに止めるボタンを置くという同じ方法で直せます。
- 終わりなく横に流れるロゴの帯や、商品を並べた「マーキー」の列。
- 5秒を超えてループするアニメーションGIF、WebP、Lottieのイラスト。
- 背景動画。消音でも専用の一時停止ボタンが必要です。
- 古い
<marquee>要素。一時停止の手段がないため、スタイルで整えるのではなく置き換えます。
自動で切り替わるカルーセルや、ニュースや価格のように自動で更新される内容も同じ達成基準の対象で、それぞれ別のトピックで扱います。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得
修正の確認
5つの確認
確認方法： キーボード、マウス、動きを減らす設定、ズーム、スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。バー、メッセージ、ライブラリを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。扱うのは動きだけです。1秒間に3回を超える閃光は、2.3.1の別の確認項目で、目視ではなく閃光の分析ツールで確認します。動きが不可欠かどうか、止めた後のページが落ち着いて読めるかは、人が判断する必要があります。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。