トピックを検索
近づくと消え、閉じられないツールチップ
ポップアップはボタンにポインターがある間だけ表示され、ボタンから離れた位置で下の入力欄を覆い、Escapeキーにも反応しません。
問題
拡大して使う人やポインターをゆっくり動かす人が、ポップアップまで移動して読めず、必要な内容を覆っていても隠せません。
注文内容の確認画面で、送料の横に小さな「?」ボタンがあります。ポインターを合わせると、少し下に「5,000円以上のご注文で送料無料。それ以外は全国ほぼ600円です。」というポップアップが表示されます。読もうとポインターを下へ動かすと、ボタンから外れた瞬間にポップアップが消えます。Tabキーでボタンへ移るとポップアップが再び表示され、今度はクーポンコードの入力欄の上に重なります。Escapeキーを押しても何も起きず、入力欄を見るにはボタンからフォーカスを移すしかありません。
ポップアップは、ボタン自身の :hover と :focus に対するCSSで表示され、ボタンから8ピクセル下に置かれています。ポップアップへ行くにはこのすき間を通る必要があり、途中でボタンのホバーが外れるため、ポップアップは閉じます。つまり、ポインターをポップアップの上に移せません。Escapeキーの処理もないため、ほかの内容を覆うポップアップを、フォーカスやポインターを動かさずに消せません。達成基準1.4.13はこの両方を求め、さらに利用者が閉じるか離れるまでポップアップが残ることも求めています。この例では、その点だけは満たしています。
拡大率が高いほど問題は深刻です。ポップアップが画面の外に一部はみ出して開き、残りを見るにはポップアップの方へ移動するしかないためです。
10グループ中3グループに影響
- 全盲 （影響なし）
- 弱視 （影響あり）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 視覚が限られる 画面拡大ソフトや拡大表示の利用者は、画面の一部しか見えないため、ポインターを動かしてポップアップを視野に入れます。ボタンから離れた瞬間に閉じるので、ポップアップを読めません。
- 手の操作が限られる 手の震えがある人は小さなボタンからポインターが外れ、ポップアップを見失います。フォーカスで開いたキーボード利用者は、フォーカスを動かさないと隠せず、下の入力欄が覆われたままになります。
- 言語・認知・学習の能力が限られる 読むのに時間がかかる人は、ポインターが動くとポップアップを失い、ボタンを探してもう一度ホバーしなければ読み終えられません。
ボタンには名前があり、ポップアップは普通の文字なので、静的なチェックでは何も見つかりません。問題が出るのは、ボタンからポップアップへポインターを動かしたときや、開いた状態でEscapeキーを押したときだけです。「ホバーでツールチップを出す」方法として .trigger:hover + .note のような隣接セレクターはよく使われ、AIのコーディングツールは見た目の余白としてマージンも付けます。そのすき間こそが、ポップアップを閉じてしまう原因です。
試してみる
送料の横の「?」を指し、そのままポップアップの上へ動かしてください。
ポップアップを最後まで読めますか？Tabでボタンへ移り、Escapeを押して、クーポン欄が見えるか確かめてください。
問題あり 直してみませんか？
送料 5,000円以上のご注文で送料無料。それ以外は全国ほぼ600円です。 600円
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
ポインターかフォーカスがボタンかポップアップにある間は開いたままにし、Escapeキーで隠せるようにします。
- 1ポインターをポップアップの上へ移しても閉じない。
- 2Escapeキーで、フォーカスもポインターも動かさずにポップアップを隠せる。
- 3ポップアップは利用者が閉じるか離れるまで残り、タイマーでは消えない。
<p class="fee"> 送料 <button type="button" class="tip-trigger" aria-describedby="fee-tip" aria-label="送料の詳細">?</button> <span role="tooltip" id="fee-tip" class="tip-note">5,000円以上のご注文で送料無料。それ以外は全国ほぼ600円です。</span></p><label for="coupon">クーポンコード</label><input id="coupon">ポップアップはボタンのホバーだけに結び付いているため、8ピクセルのすき間を越えると閉じます。Escapeキーは効かず、フォーカスが移るまでクーポンの入力欄を覆います。マークアップは role="tooltip" と aria-describedby を備えた正しいツールチップです。roleはスクリーンリーダーに役割を伝えるだけで、動作は何も加えないため、問題は残ります。
ポップアップは .tip の内側にあり、橋がすき間を埋めるため、ボタンからポップアップまでポインターは部品の上にあり続けます。閉じるのはホバーとフォーカスの両方が離れたときだけで、タイマーはありません。Escapeキーは何も動かさずにポップアップを隠し、利用者がいったん離れて戻るまで隠れたままです。aria-describedby によって、ポップアップが隠れている間もスクリーンリーダーはボタンと一緒にポップアップを読めます。
どちらも基準を満たします。ホバーのツールチップは、マウス利用者が指すだけでポップアップを見られ、すべてのブラウザーで動きます。ただし、スクリプト、橋、Escapeキーの処理は自分で保守するコードで、タッチ画面ではフォーカス頼みになります。ホバーのツールチップでは、ボタンにフォーカスが移ると、aria-describedby によってスクリーンリーダーがすぐにポップアップの文を読みます。トグルチップは、開閉とフォーカスの戻りをブラウザーに任せ、文を読み上げる短いスクリプトだけで済みます。マウス、キーボード、タッチで同じように動きますが、ポップアップを見たり聞いたりするには一度押す必要があります。アイコンだけのツールバーのボタンのように、指せば見えると期待される短いラベルなら、ホバーのツールチップを選びます。送料、規約、パスワードの条件のように読む必要のある情報なら、トグルチップを選びます。
CSSだけでもポップアップの上へポインターを移せるようにはできます。.tip:hover .tip-note, .tip:focus-within .tip-note とすれば、ボタンだけでなくポップアップの上でも開いたままです。ただし、Escapeキーで隠せないため、これだけでは修正になりません。keydownの処理を加えてください。Escapeキーが必須なのは、ポップアップがほかの内容を覆うか置き換える場合だけです。何も隠さない位置なら省けますが、拡大するとレイアウトが変わるため、常に対応しておく方が安全です。
role="tooltip" は、ホバーやフォーカスで現れ、ボタンを説明する文にだけ付けます。ブラウザーはそれを読み上げに使うだけです。ホバーのツールチップでは付け、トグルチップでは付けません。トグルチップのポップアップはクリックで開き、開閉状態はボタンが伝えるためです。
必要な情報に title 属性を使わないでください。そのツールチップはブラウザーが描くため1.4.13の対象外ですが、キーボードのフォーカスやタッチでは表示されず、見た目も変えられません。タイマーでポップアップを消すのもやめます。読むのが遅い人がポップアップを失い、基準も残ることを求めています。
ポップアップは短くし、リンクやボタンを入れないでください。操作できる内容は、ツールチップではなく、モーダルではないダイアログや開閉パネル（panel-dismissal のガイド）で扱います。コンポーネントライブラリーのツールチップを使う場合も、下の確認を行ってください。ボタンのホバーだけで開き、短い遅延で閉じるものが多くあります。
修正の確認
5つの確認
確認方法： マウス、キーボード、ズーム、スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。共通のツールチップのコンポーネントを変更した際は、再度確認します。
制限
これは一つのボタンに付く短い文字のポップアップを扱うもので、メニュー、ダイアログ、リンクを含むポップアップ、スクロールや遅延で現れる内容には当てはまりません。実際のツールチップを、利用者が使う拡大率と支援技術で確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。