Bootstrapで理解するツールチップとポップオーバーのアクセシビリティ！マウス依存を避ける正しい使い方

ツールチップ/ポップオーバーの注意点：マウス依存を避ける設計

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapのツールチップって便利ですけど、アクセシビリティを考えると難しいんですか？」

先生

「実は、ツールチップやポップオーバーは“マウス操作に依存しがちな代表例”なんです。正しい使い方を知らないと、多くの人が情報にアクセスできなくなってしまいます。」

生徒

「たしかに…マウスを当てると表示される仕組みですよね。キーボードの人はどうなるんですか？」

先生

「そのままだと表示されません。だからこそ、Bootstrapでもマウス以外の操作を考えた設計が必要なんです。誰でも使える方法を今から説明しますね。」

1. ツールチップとポップオーバーは“マウス操作前提”が落とし穴

ツールチップはボタンやテキストにマウスを重ねると説明が表示される仕組み、ポップオーバーはクリックすると吹き出しのような情報が表示されるUIです。しかし、これらは多くの場合「マウスがあること」を前提に設計されています。

例えば、キーボードだけで操作する人、タッチデバイスを使う人、またスクリーンリーダーを使う人は、マウスオーバーでは何も表示されず、情報にアクセスできなくなってしまいます。これがアクセシビリティにおける大きな問題です。

Bootstrap自体は便利ですが、ツールチップやポップオーバーを使うときは、“見えない情報を見えるようにする仕組み”を自分で補う必要があります。

2. マウス依存を避けるための基本：キーボード操作で表示できるようにする

ツールチップの大きな課題は「フォーカスしただけでは表示されない」点です。これは“hover（マウスを乗せる）”が発火条件になっているためです。キーボードユーザーはTabキーで移動しますが、hoverは発生しません。

そこでBootstrapでは、data-bs-trigger="focus" を設定することで、フォーカス時にもツールチップが表示できるようになります。これによりキーボード操作でも必要な説明が表示されます。


<button class="btn btn-secondary"
    data-bs-toggle="tooltip"
    data-bs-trigger="focus"
    title="キーボードでも表示される説明です。">
    ツールチップを見る
</button>

ブラウザ表示

このように、フォーカスでもトリガーされる設定にすると、誰でも表示できる“アクセシブルなツールチップ”になります。

3. 重要情報をツールチップに入れてはいけない理由

アクセシビリティの観点では、ツールチップやポップオーバーに「必須情報」や「重要な説明」を入れることは推奨されません。理由は、その情報がユーザーによって“見えたり見えなかったりする”からです。

例えばタッチデバイスではツールチップが表示されないことがあり、スクリーンリーダー利用者はツールチップの内容を読み上げられない場合があります。つまり、ツールチップはあくまで補足説明として使い、主情報は必ず画面上に常に表示するほうが安全です。

初心者の方ほどツールチップに多くの情報を置きがちですが、アクセシブルな設計では「見えないと困る情報」は絶対にツールチップに入れないことが鉄則です。

4. ポップオーバーは読み上げされない？補助テキストとJavaScriptの活用が必要

ポップオーバーは内容がやや長くなりがちですが、スクリーンリーダーで読むことが難しいケースがあります。クリックして表示されても、読み上げソフトが「新しい情報が出た」と判断しないためです。そのため、見た目だけでなく、読み上げ側にも分かる仕組みを用意してあげる必要があります。

特に覚えておきたいのが、ポップオーバーはCSSだけでは動かず、JavaScriptという「動きを担当する仕組み」が必須になるという点です。ツールチップはBootstrap側が自動で初期化してくれる場合がありますが、ポップオーバーは自分でJavaScriptのコードを書いて有効化しないと表示されません。まずは「ポップオーバーを使うときはJavaScriptが必要なんだ」と押さえておきましょう。

さらに情報が重要な場合はaria-describedbyを使って補助説明を紐づける方法があります。こうするとスクリーンリーダーはボタンと説明をセットで認識できるため、ユーザーが迷いません。視覚的なポップオーバーと、読み上げ用の補助テキストの両方を用意することで、どんな環境でも同じ情報にアクセスできるようになります。


<button class="btn btn-info"
    data-bs-toggle="popover"
    aria-describedby="infoText"
    data-bs-content="ここに補足情報が表示されます。">
    ポップオーバーを開く
</button>

<p id="infoText" class="visually-hidden">
    このボタンは詳細な説明を開く機能があります。
</p>

<script>
  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
  [...popoverTriggerList].map(el => new bootstrap.Popover(el));
</script>

ブラウザ表示

このように、視覚には見えない「visually-hidden」クラスで補助説明を用意しつつ、JavaScriptでポップオーバーを有効化することで、見た目にもアクセシブルにも配慮した設計ができます。ツールチップはそのままでも動くことがありますが、ポップオーバーは必ずJavaScriptで初期化する必要がある、という違いも合わせて覚えておくと理解が深まりやすくなります。