この記事でわかること

  • マウスを重ねたときやフォーカスしたときに出る内容に、WCAGが求める3つの条件
  • Escキーで閉じられるようにする理由と、閉じられなくてもよい例外
  • 出た内容の上にマウスを移しても消えないようにする理由
  • 作ったツールチップやメニューを、マウスとキーボードで確かめる手順

ボタンの説明のツールチップや、メニューにマウスを重ねると開くサブメニューを作ったとき、マウスを少し動かしただけで消えて読めない、ということがあります。画面を拡大して使う人や、大きなマウスポインターを使う人には、こうした作りが特に扱いにくくなります。この記事では、ホバー(マウスを重ねること)やフォーカスで出る内容を、閉じやすく、消えにくくする作り方を紹介します。

もとにした資料は、W3CのWCAG 2.2の達成基準1.4.13と、その解説(Understanding)、失敗例F95、技法SCR39で、どれも2026年10月25日に取得して内容を確かめました。特定のツールやスクール、ライブラリの書き方はすすめません。

先に結論: 閉じられる・上に移れる・消えない

先に結論を書くと、ホバーやフォーカスで出る内容は、マウスやフォーカスを動かさずに閉じられ、出た内容の上にマウスを移しても消えず、利用者が離れるか閉じるまで出たままにします。 3つの条件をまとめると、次のとおりです。

条件 よい状態
閉じられる Escで閉じる
上に移れる 移っても残る
消えない 時間で消えない
対象外 title属性

ホバーやフォーカスで出る内容とアクセシビリティの基準

WCAG 2.2の達成基準1.4.13(Content on Hover or Focus)は、レベルAAの基準です。マウスを重ねたり、キーボードでフォーカスを当てたりすると内容が出て、離すと消える作りのときに、閉じられる(Dismissible)・上に移れる(Hoverable)・出たままになる(Persistent)の3つを求めています。

対象の例として、WCAGの注記では、自分で作ったツールチップ、サブメニュー、ほかの操作を止めないポップアップを挙げています。一方で、HTMLのtitle属性で出るツールチップのように、ブラウザが表示を決めていて、作る人が見た目を変えていないものは例外です。

フォーカスが当たったときに見えるようになる「本文へ移動」のリンクのように、部品そのものが見えるだけのものは、追加の内容を出していないため対象外です。W3Cの解説では、操作を止めるダイアログも、フォーカスを移す必要があり、ホバーやフォーカスで出すべきものではないため、この基準の範囲の外としています。

Escキーで閉じられるようにする

1つ目の条件は、マウスやフォーカスを動かさずに、出た内容を閉じる仕組みを用意することです。W3Cの解説では、その例としてEscキーを押すことを挙げています。

画面を拡大して使う人は、ページの一部しか見えていません。拡大した範囲は、マウスやフォーカスの動きに合わせて動くため、出た内容がページの中身を覆うと、本来の内容を見られなくなります。W3Cの解説は、このために、マウスを動かさずに閉じられることが大切だとしています。

ただし、閉じる仕組みが無くてよい例外が2つあります。

  • 入力エラーを伝える内容: 利用者が気づいて直す必要があるため、閉じられなくてもよいとしています
  • ほかの内容を隠さない内容: 空いた所や、飾りだけの背景の上に出る内容は、ページを見る妨げにならないとしています。出したきっかけの部品を隠す場合は、例外になりません

上に移っても消えないようにする

2つ目の条件は、マウスを重ねて出る内容なら、出た内容の上にマウスを移しても消えないようにすることです。W3Cの解説では、きっかけの部品の上にマウスを置いたままでないと読めない内容は、読みにくいか、読めないことがあるとしています。

拡大して使う人は、出た内容の全体を読むために、マウスを動かして見える範囲をずらします。大きなマウスポインターを使う人は、ポインターで内容の一部が隠れるため、ポインターを内容の上へ動かして読みます。どちらの場合も、マウスがきっかけの部品から離れたときに内容が消えると、読めません。

W3Cの失敗例F95では、ポップアップの内容を読もうとして、きっかけの部品からポップアップの方へマウスを動かすと、すぐに閉じてしまう作りを、満たさない例にしています。グラフの点にマウスを重ねると詳しい内容が出る作りで、内容へ向かう途中でほかの点に触れ、目当ての内容が別のものに置き換わる例も挙げています。

自分で閉じるまで出たままにする

3つ目の条件は、出た内容を、利用者が読み終えるまで出たままにすることです。W3Cの解説では、拡大の倍率を変える、マウスを動かす、内容を視界に入れるなどのために、時間がかかる人がいるとしています。

出た内容は、次のどれかになるまで見え続けるようにします。

  • 利用者が、きっかけの部品と出た内容から、マウスやフォーカスを離したとき
  • 利用者が、Escキーなどの閉じる仕組みで閉じたとき
  • 「処理中」の表示のように、内容が正しくなくなったとき

手順: マウスとキーボードで確かめる

確かめるときは、ページの中のツールチップやメニューなど、ホバーやフォーカスで出る内容を1つずつ選び、次の順で進めます。W3Cの技法SCR39の確かめ方に沿った手順です。

  1. マウスを重ねて出す: きっかけの部品にマウスを重ね、内容が出ることを確かめます
  2. 内容の上へ移す: マウスを出た内容の上へゆっくり動かし、途中で消えないかを確かめます
  3. しばらく待つ: マウスを動かさずに待ち、時間がたっても自動で閉じないかを確かめます
  4. 動かさずに閉じる: マウスをきっかけの部品に置いたまま、Escキーなどで閉じられるかを確かめます
  5. キーボードでも試す: Tabキーできっかけの部品にフォーカスを当て、内容が出ること、時間で消えないこと、フォーカスを動かさずに閉じられることを確かめます

技法SCR39では、閉じる方法は、Escキーのほかに、案内しているほかのキーを押すか、きっかけの部品を押すことでもよいとしています。

自分で直すか、相談するかの判断

判断の目安は、「出し方と消し方を、CSSと少しのスクリプトで変えられるか」です。

  • 時間で消す設定がある: 時間で消す処理を外し、離したときか閉じたときに消すようにします
  • マウスを離すとすぐ消える: 出た内容を、きっかけの部品のすぐ近くか、重なる位置に置くと、上へ移りやすくなります。W3Cの解説でも、出た内容は、きっかけの部品に重なるか、隣に置くことが多いとしています
  • ライブラリやテーマの部品で作っている: 出し方と消し方を自分で変えられない場合があります。上の手順で消えた所や閉じられなかった所を書き出し、その部品を選んだ人や、Webデザインの講師に見てもらいます

つまずきやすいところ

  • マウスでしか出せない: マウスを重ねて出せる内容は、キーボードのフォーカスでも出せるようにします。Tabキーで選べるかと、選んだ所の表示の確かめ方は、Webデザインでキーボードだけで操作できるかを確かめる方法で紹介しています
  • 拡大した状態で試さない: 拡大すると、出た内容が見える範囲からはみ出しやすくなります。文字を拡大したときの確かめ方は、Webデザインで文字の大きさと行間を決める方法で紹介しています
  • きっかけの部品が小さい: 小さな部品にマウスを重ねるのは難しく、W3Cの解説では、手元が細かく動かしにくい人ほど、うっかり出した内容を閉じやすくすることが役に立つとしています。部品の大きさは、Webデザインでボタンやリンクの押しやすい大きさを決める方法で紹介しています
  • ダイアログをホバーで開く: 操作を止めるダイアログは、ホバーやフォーカスで開くものではありません。押したときに開くようにします

まとめ

  • WCAG 2.2の達成基準1.4.13は、ホバーやフォーカスで出る内容に、閉じられる・上に移れる・出たままの3つを求めます
  • マウスやフォーカスを動かさずに、Escキーなどで閉じられるようにします
  • 出た内容の上にマウスを移しても、消えないようにします
  • 時間で自動に消さず、利用者が離れるか閉じるまで出たままにします