トピックを検索
読んでいる途中や入力中に勝手に開いてしまうポップアップ
メールマガジンへの登録を勧めるポップアップが、ページを開いて10秒たつと利用者が何をしていても開くうえ、後回しにしたり表示しないようにしたりする手段がページにない
setTimeout(() => signup.showModal(), 10000); 問題
ページを読んだり入力したりしている最中に、頼んでもいないポップアップが重なって開き、後回しにすることも止めることもできない
「Fernleaf Paper」は、グリーティングカードを販売し、代わりに投函もしてくれるお店です。初めて訪れた人のメールアドレスを集めたいと考え、丁寧にデザインしたポップアップを用意しています。暗くしたページの上に柔らかなカードが重なり、「初回のご注文が10%オフ」の見出し、メールアドレス欄が1つ、「登録する」ボタン、隅に×があります。ページを開いたとたんに出てこないよう、お店が使うマーケティングツールで、ページを開いてから10秒後に表示する設定にしています。
野の花のバースデーカードのページで、ある人がカードに書くメッセージを入力しています。「お誕生日おめでとう！すてきな」まで入力したところで10秒がたちます。ポップアップがページの上に開き、フォーカスがメールアドレス欄へ移るため、続けて入力した「一年に」はカードではなくメールアドレス欄に入ります。カードの説明を読んでいたスクリーンリーダーの利用者には、代わりにポップアップの見出しと入力欄が読み上げられます。注意を保つのが難しい人の目の前には、書きかけのメッセージではなく特典が広がっています。ポップアップは×とEscapeキーで閉じられますが、現れる前に後回しにしたり、出ないようにしたりする手段はページのどこにもありません。
達成基準2.2.4「割り込み」（レベルAAA）は、緊急の場合を除いて、割り込みを利用者が延期または抑制できることを求めています。Understandingのページは、その意図を、作成者やサーバーからの更新を利用者がオフにできるようにすることと説明しています。例として挙げられているのは1つだけで、セッションが終わるまですべての更新と通知を延期するオプションを設定ページに用意するというものです。W3Cの達成方法G75では、設定を用意するか、更新の直前に知らせて利用者が抑制できるようにします。G76では、自動で更新する代わりに、利用者が更新を求められるようにします。
このポップアップには、そのどちらもありません。×があり、Escapeキーでも閉じますが、どちらも割り込みが起きた後の操作です。押せるようになったときには、文はもう途中で切られています。現れる前に断ったり、後にしてもらったりする手段はありません。
ブラウザーの側に、ポップアップを待たせる理由はありません。タイマーは、誰かが作業の途中かどうかに関係なく動きます。showModal() はモーダルダイアログとして正しく動きます。ダイアログをページの上に出し、背後のページを操作できなくして、フォーカスをダイアログの中（ここでは autofocus の付いた入力欄）へ移します。ポップアップの作りはどこも正しく、問題は開くタイミングです。
10秒のタイマーは、訪れた瞬間にポップアップを出さないために選ばれています。ただ10秒あれば、たいていの人は何かを始めています。そのためポップアップは、目的の作業をしている最中の人の上に開き、ゆっくり読んだり入力したりする人ほど、その途中で出会うことになります。
10グループ中4グループに影響
- 全盲 （影響あり）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 筋力・可動域 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 言語・認知・学習の能力が限られる W3Cがこの達成基準でまず挙げているのは、注意を保つのが難しい人です。ポップアップが画面を占めると、書いていたメッセージや読んでいた文の流れを見失い、元に戻るまでの手間は、ポップアップを閉じる1回の操作よりはるかに大きくなります。
- 視覚を使わない フォーカスがポップアップのメールアドレス欄へ移り、スクリーンリーダーもそこへ移ります。読み上げは読んでいた内容からポップアップの見出しと入力欄へ移り、閉じた後の元の位置は、自分で探し直すしかありません。
- 手の操作が限られる キーボードやスイッチの利用者、音声入力でメッセージを書いている人は、フォーカスが移った後もポップアップのメールアドレス欄へ入力し続けてしまい、消して、閉じて、メッセージに戻る手間がかかります。
- 視覚が限られる フォーカスを追う画面拡大ソフトは、メッセージからポップアップへ表示を移すため、読んでいた部分が視界から外れます。
マークアップに誤りはなく、ページを読み込んで数秒で離れるスキャンは、ポップアップが開く前に終わってしまいます。この診断では、利用者が操作する前にページが始めるタイマーを見張り、コールバックが showModal() か、openPopup() のような名前の関数を呼んでいるものを ew:timed-popup-manual-check として確認に回します。ポップアップをオフにする設定がすでにあるのか、緊急のものなのかは、人が見て確かめるしかないためです。マーケティングツールのポップアップは管理画面で設定され、診断が見分けられないコードで読み込まれることが多く、チャットのあいさつはチャット側で設定されるため、どちらも診断では見つかりません。管理画面を人が確かめる必要があります。AIのコーディングツールに「10秒後にニュースレターのポップアップを出して」と頼むと、修正前の例のような setTimeout を書きます。
試してみる
カードに書くメッセージを、ゆっくり入力してみましょう
ショップの10秒は、ページを初めてクリックするかTabキーで入ったときに始まり、デモ用の時計で数えます。10秒を過ぎても入力を続け、文字がどこに入るかを見てください。続いてそれぞれの修正を適用し、特典がほしいときに「初回のご注文が10%オフ」を押すか、時間がたつ前に設定のチェックを外して「最初から」でページを開き直してみてください。
問題あり 修正できますか？
Fernleaf Paper
野の花のバースデーカード
$4.50 · 押し花をあしらった再生紙のカードです。メッセージを書き添えて、代わりに投函します。
修正方法
特典は、利用者が求めたときに開く
<main> <h1>Wildflower birthday card</h1> <form class="card-form"> <label for="card-message">Message inside the card</label> <textarea id="card-message" name="message" rows="4"></textarea> <button>Add to basket</button> </form></main><dialog id="signup" aria-labelledby="signup-title"> <button type="button" class="signup-close" aria-label="Close">×</button> <h2 id="signup-title">Get 10% off your first order</h2> <p>Sign up for news of new designs and sales.</p> <form method="dialog"> <label for="signup-email">Email address</label> <input id="signup-email" name="email" type="email" autocomplete="email" autofocus required> <button>Sign up</button> </form></dialog>問題点3点
ポップアップそのものは正しく作られています。HTML標準のダイアログで、×は名前のあるボタンです。Escapeキーで閉じ、閉じるとフォーカスは元の位置に戻ります。問題は開くタイミングにあります。
- 利用者がそのとき何をしていても、ページを開いて10秒後に開きます。
- フォーカスがメールアドレス欄へ移るため、カードに書くつもりの文字がポップアップに入り、スクリーンリーダーはページの読み上げを止めてポップアップを読みます。
- 現れる前に後回しにしたり、出ないようにしたりする手段がページにありません。
特典を開くボタン
<p class="offer-bar"> New here? <button type="button" id="offer-open">Get 10% off your first order</button></p><main> <h1>Wildflower birthday card</h1> <form class="card-form"> <label for="card-message">Message inside the card</label> <textarea id="card-message" name="message" rows="4"></textarea> <button>Add to basket</button> </form></main><dialog id="signup" aria-labelledby="signup-title"> <button type="button" class="signup-close" aria-label="Close">×</button> <h2 id="signup-title">Get 10% off your first order</h2> <p>Sign up for news of new designs and sales.</p> <form method="dialog"> <label for="signup-email">Email address</label> <input id="signup-email" name="email" type="email" autocomplete="email" autofocus required> <button>Sign up</button> </form></dialog>修正の手順3ステップ
- タイマーを削除し、ポップアップが勝手に開かないようにします。
- ページの先頭に、何を開くかを示すボタン「初回のご注文が10%オフ」を置きます。特典はページを開いた時点からすべての訪問者の目に入り、どのページでも同じ場所にあります。
- そのボタンから同じポップアップを開きます。フォーカスがメールアドレス欄へ移るのは利用者がボタンを押したときだけで、閉じるとボタンに戻ります。
修正前の問題が解消し、2.2.4を満たします。求められるまで何も開かないので、後回しにするものがありません。ポップアップの見た目はそのままで、変わるのは、最初からページの先頭にある細いバーだけです。
この方法を選ぶ理由：ページは、利用者が求めたときだけ変える
ボタンは達成方法G76のとおりに2.2.4を満たし、設定は達成基準の文言を満たしますが、G75のテストは満たしません。おすすめはボタンです。誰の作業も遮らないので、先に設定を探す必要がありません。設定だけでは足りません。設定をまだ見つけていない人には、誰にでも作業の途中でポップアップが開き続けるからです。ボタンにすると、ポップアップを目の前に出されなければ登録しなかった人の分だけ、お店の登録は減ります。どのページでも先頭にバーを置けば、誰の作業も止めずに、特典を目に入る場所に置いておけます。設定は、時間で開くポップアップをどうしても残す場合だけにし、ページの最初に置いて、選択を覚えておきます。
誰も押していないのに開く、ほかのきっかけ。 マーケティングツールには、ページの途中までスクロールしたとき、サイトにしばらくいたとき、立ち去ろうとするようにポインターがアドレスバーへ向かったときに開く設定もあります。どれも求められないまま作業の途中に開くもので、直し方も同じです。ボタンから開くか、設定でオフにできるようにします。
閉じたことを覚えておく。 マーケティングツールでは、一度閉じられたポップアップを何日か出さないように設定できます。2回目の割り込みを防げるので、やる価値はあります。ただ、1回目は変わらず現れ、その前に断る手段もないので、それだけでは修正前の問題は解消しません。
自分からあいさつしてくるチャット。 チャットツールには、訪れてから決まった時間がたつとあいさつを送り、それと一緒にチャットのウィジェットを開く機能があります。Zendeskの既定のトリガー「Proactive Greeting」は、サイトが有効にするまでは動きませんが、新しい訪問者が来てから30秒後にメッセージを送ります。これも同じ問題です。あいさつはランチャーからパネルが開かれたときに出すか、同じ設定でオフにできるようにします。ランチャーとパネルの操作はキーボードで開けず、閉じるボタンにも名前がないチャットで、メッセージの読み上げはメッセージを読み上げないチャットウィジェットで扱います。
更新の案内。 新しいバージョンが出たWebアプリは、作業中の画面にダイアログを重ねるのではなく、「新しいバージョンがあります。再読み込み」のように、1行やボタンで控えめに知らせて待つことができます。再読み込みは、利用者が押したときに行います。
緊急時は割り込んでよい。 WCAGの緊急事態は、健康、安全、財産を守るためにすぐ行動が必要な、突然の予期しない状況を指し、Understandingのページは、データの損失や接続の切断を警告するメッセージもそこに含めています。セッションが切れて注文が失われそうだという警告は割り込んでよく、むしろ割り込むべきです。詳しくは警告も延長もないセッションタイムアウトで説明しています。今夜で終わるセールは緊急事態ではありません。こうしたメッセージの読み上げ方と、定型の知らせをスクリーンリーダーの読み上げの後に回す理由は、定型の通知でもVoiceOverの読み上げを遮るアラートで扱います。
自分で再読み込みするページ。 <meta http-equiv="refresh"> のあるページは再読み込みによって割り込み、W3Cの失敗例F41は、これを2.2.1と3.2.5に加えて2.2.4の失敗としています。時間がたつと自動で再読み込みや転送をするページのように削除します。タイマーで書き換わる一覧は読んでいる最中に自動更新で書き換わってしまう新着一覧で扱います。
ポップアップそのもの。 このガイドで扱うのは、ポップアップが開くタイミングです。開いた後には、キーボードで閉じられないポップアップのようにキーボードで閉じられることと、背後にフォーカスが残るモーダルのようにフォーカスを中に留め、閉じたら戻すことが、別に必要です。
デザインの案
特典は、誰の手も止めずに見せておける
求められるまで前に出てこない登録欄の置き方をあと3通りと、勝手に開く流行りの形を2通り紹介します。それぞれのサンプルにTabキーかポインターで入り、表示されているものを押してみてください。
デザインファイルで
- 特典が普段ページのどこにあるかを、スマートフォンと広い画面の両方で描き、ポップアップはそのボタンで開くものとしてだけ描く。
- ボタンには「こちら」ではなく、「初回のご注文が10%オフ」のように何が開くかを書く。
- ポップアップが開いたときのフォーカスの移動先と、閉じたらボタンに戻ることを書き込む。
- 時間で開くポップアップをどうしても残すなら、それをオフにする設定をページの先頭に描き、オフにした状態のページも描く。
合格
Fernleaf Paper
野の花のバースデーカード
$4.50 · 押し花をあしらった再生紙のカード。
初回のご注文が10%オフ
ページの中の登録の帯 カードの説明と次のセクションの間に置いた、温かい紙色の帯です。見出し、入力欄1つ、緑の「登録する」ボタン（#2f5d50に白で7.49:1）があります。ページを覆うものはなく、スクロールしてたどり着いたときに出会い、押さなくても特典の全体が見えます。Fernleaf Paper
野の花のバースデーカード
$4.50 · 押し花をあしらった再生紙のカード。
最初からある「10%オフ」のタブ 画面の端の下のほうに固定した、ギフトのアイコン付きの小さな緑のタブで、ページを開いた時点からあり、勝手に動いたり大きくなったりしません。押すと横に登録欄が開き、フォーカスは入力欄に移ります。×かEscapeキーで閉じると、フォーカスはタブに戻ります。内容やフォーカスのあるコントロールに重ならないようにします。基本原則：ページは、利用者が求めたときだけ変える
かご
野の花のバースデーカード $4.50
合計 $4.50
登録すると、このご注文が$0.45お得に。
かごの合計の横に置く特典 合計の下に置いた控えめな1行「登録すると、このご注文が$0.45お得に」（茶色#6b5d4fで6.36:1）と、その後ろの「10%オフにする」ボタンです。割引に意味がある場面で特典を示し、押されたときだけ登録欄を開きます。
不合格
- ページを半分読むと現れるスライドインWCAG 2.2.4 サンプルにTabキーかポインターで入って待つと、登録欄がページの下半分に滑り上がり、フォーカスを奪います。全面のポップアップより控えめに感じますが、読んでいる途中や入力の途中に開くことに変わりはなく、前もって断る手段もありません。サンプルでは1回だけです。
基本原則：ページは、利用者が求めたときだけ変える
Fernleaf Paper
野の花のバースデーカード
$4.50 · 押し花をあしらった再生紙のカード。
訪れるとすぐ開く「回して当てる」ルーレットWCAG 2.2.4 ページを開いた直後に、賞品を並べた鮮やかなルーレットがページを覆います。「回して当てる」と小さな「結構です」があります。楽しげですが、目的のページとの間に立ちはだかり、利用者に残される選択は、現れた後に閉じることだけです。基本原則：ページは、利用者が求めたときだけ変える
修正の確認
5項目、マウス不要
確認方法： キーボード、スクリーンリーダー
OS、ブラウザー、支援技術のバージョン、ビルド、日付、各手順の実際の結果を記録してください。ポップアップや、それを表示するツール、そのキャンペーンを変えたら、確認をやり直してください。
制限
これは出発点となる実装例で、すべてのアプリケーションでの動作を保証するものではありません。扱うのは、タイマーで開く登録のポップアップ1つです。「登録する」がメールアドレスをどう扱うかは、サンプルでは省いています。マーケティングツールやチャットツールの設定やキャンペーンは、サイト側のデプロイなしに変わるため、変更のたびにポップアップを確かめ直す必要があります。ある割り込みが緊急かどうかはサービスについての判断で、コードでは決められません。訪問者が使う支援技術で、一連の操作を通して確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
EaseWebのサービス
修正した問題を、次のリリースで再発させない
このガイドのような修正方法を、コーディングエージェントが従うルールと、CIのチェックに組み込みます。あわせて定期的に、キーボードとスクリーンリーダーで手動の再テストを行います。