ツールチップ

ツールチップとは？

ツールチップは、要素にフォーカスやホバーをしたとき、 その要素を補足説明する小さな吹き出しです。 アイコンボタンの意味や、入力欄の補足などに使われます。

注意点は、ツールチップは「補足」であって主要な情報ではないということ。 操作に必須の情報をツールチップだけに入れてはいけません。

なぜアクセシビリティが大事なの？

自作ツールチップや title 属性頼みは、次の問題を起こします。

• キーボード利用者に出ない。ホバー（マウス）でしか表示しないと、Tab でたどり着いても説明が読めません。
• タッチ利用者に出ない。スマホ等にはホバーがありません。
• title 属性は不安定。表示が遅く、スタイルできず、 支援技術での扱いも一定しません。
• 消せない。WCAG では、出した補足は Esc で閉じられることが求められます。

解決策は、トリガーに aria-describedby でツールチップを関連付け、 フォーカスでもホバーでも表示し、Esc で閉じることです。

ライブデモ（推奨実装）

下のボタンには APG に沿ったツールチップが付いています。マウスのホバーだけでなく、Tab でフォーカスしても表示され、Esc で閉じられることを確認してください。

キーボード操作

必要な WAI-ARIA / ロール

実装：推奨パターン（Good）

マークアップ:

<!-- トリガーは必ずフォーカス可能な要素（button など） -->
<button type="button"
        id="tip-trigger"
        aria-describedby="tip-text">
  保存
</button>

<!-- ツールチップ本体。自身はフォーカス不可、role="tooltip" -->
<div id="tip-text" role="tooltip" hidden>
  変更内容をサーバーに保存します
</div>

表示・非表示のスクリプト（focus と hover の両対応＋Escが肝）:

const trigger = document.getElementById('tip-trigger');
const tip = document.getElementById('tip-text');

if (trigger && tip) {
  const show = () => { tip.hidden = false; };
  const hide = () => { tip.hidden = true; };

  // フォーカスでもホバーでも表示する（両対応が必須）
  trigger.addEventListener('focus', show);
  trigger.addEventListener('blur', hide);
  trigger.addEventListener('mouseenter', show);
  trigger.addEventListener('mouseleave', hide);

  // Esc で閉じられるようにする
  trigger.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') hide();
  });
}

アンチパターン（Bad）

下のボタンは title 属性だけ、またはホバーでしか出ない自作ツールチップです。Tab でフォーカスしても説明が出ず、Esc でも閉じられません。

<!-- ❌ アンチパターン1：title 属性だけ -->
<button type="button" title="変更内容を保存します">保存</button>

<!-- ❌ アンチパターン2：ホバーでしか出ない自作ツールチップ -->
<span class="has-tip">保存
  <span class="tip">変更内容を保存します</span>
</span>

実装チェックリスト

• トリガーはフォーカス可能な要素（<button> 等）
• トリガーに aria-describedby でツールチップを関連付けている
• ツールチップ本体に role="tooltip" を付けている
• フォーカスでもホバーでも表示される
• Esc で閉じられる（フォーカスはトリガーに残す）
• ツールチップ自身はフォーカスを受け取らない／操作要素を入れない
• 操作に必須の情報をツールチップ「だけ」に入れていない

原文（英語）:Tooltip Pattern — W3C APG（新しいタブで開きます）