アクセシブルなツールチップの作り方：WCAG 1.4.13、ARIA、実装例

ツールチップは、ボタンやアイコンなどに短い補足説明を添える小さなポップアップです。

見た目が整っていても、マウスを少し動かすと消える、キーボードでは開けない、読み上げソフトに説明が伝わらない状態では、必要な情報に届かない利用者が生まれます。

設計では、表示方法だけでなく、閉じ方、表示を保つ条件、支援技術への伝え方を一つの動作として決めます。

ツールチップで補足してよい情報

ツールチップに置くのは、操作対象の意味を補う短い非インタラクティブな情報です。

入力条件や料金、エラーの解決方法など、操作の完了に欠かせない情報は、最初から見える説明文として配置するほうが確実です。

この切り分けを先に行うと、ツールチップへ多くの情報を詰め込み、読みにくくなる問題を避けられます。

WCAG 1.4.13が求める三つの条件

WCAG 2.2の達成基準1.4.13「ホバーまたはフォーカスで表示されるコンテンツ」は、ホバーやキーボードフォーカスによって現れ、解除によって消える追加コンテンツを対象とするレベルAAの基準です。

WCAG 2.2の全体像を先に確認すると、この基準が知覚しやすさに関する要件であることを位置付けやすくなります。

解除可能には、入力エラーを伝える場合、または追加コンテンツがほかの内容を覆わず置き換えない場合の例外があります。

実務では、配置による例外だけに頼らず、Escapeキーで閉じられる動作を用意すると確認しやすくなります。

キーボードとポインターで同じ情報に届く設計

ポインターのホバーで表示するツールチップは、トリガーがキーボードフォーカスを受け取ったときにも表示します。

フォーカスはツールチップへ移さず、元のボタンやリンクに残します。

ポインター操作では、トリガーとツールチップのどちらかにポインターがある間、表示を保ちます。

元のコード例のようにトリガーのmouseoutだけで非表示にすると、ツールチップへ移動する途中で消えるため、ホバー可能の条件を満たせません。

フォーカス移動の基本は、キーボード操作とフォーカス管理の解説でも確認できます。

ARIAで説明を関連付ける

トリガーにはaria-describedbyを指定し、値にはツールチップ要素のidを設定します。

ツールチップ要素にはrole='tooltip'を付けます。

これにより、トリガーと補足説明の関係をプログラムで解釈できる形にします。

WAI-ARIA Authoring Practicesのツールチップパターンは、この関係とEscapeキーによる解除を示しています。

ただし、同ページはパターンが作業中であることも明記しています。

実装後は、想定するブラウザーとスクリーンリーダーの組み合わせで読み上げを確認します。

ARIA全般の役割と注意点は、WAI-ARIAの基本とアンチパターンに整理しています。

ホバーとフォーカスを両立する実装例

次の例は、トリガーとツールチップを同じラッパーに入れ、ポインターとフォーカスのどちらかが残っている間は表示を保ちます。

HTML

<span class="tooltip-wrap">
  <button
    type="button"
    class="tooltip-trigger"
    aria-describedby="save-help"
  >
    保存
  </button>
  <span
    id="save-help"
    class="tooltip"
    role="tooltip"
    hidden
  >
    変更内容を保存します。
  </span>
</span>

CSS

.tooltip-wrap {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  min-width: 14rem;
  padding: 0.5rem 0.75rem;
  color: #fff;
  background: #1f2937;
  border-radius: 0.25rem;
  z-index: 10;
}

.tooltip[hidden] {
  display: none;
}

.tooltip-trigger:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

JavaScript

const wrapper = document.querySelector('.tooltip-wrap');
const trigger = wrapper.querySelector('.tooltip-trigger');
const tooltip = wrapper.querySelector('[role=tooltip]');
let dismissed = false;

function showTooltip() {
  if (!dismissed) {
    tooltip.hidden = false;
  }
}

function hideTooltip() {
  tooltip.hidden = true;
}

function closeIfInactive() {
  const pointerIsInside = wrapper.matches(':hover');
  const triggerHasFocus = document.activeElement === trigger;

  if (!pointerIsInside && !triggerHasFocus) {
    hideTooltip();
  }
}

wrapper.addEventListener('pointerenter', () => {
  dismissed = false;
  showTooltip();
});

wrapper.addEventListener('pointerleave', () => {
  dismissed = false;
  closeIfInactive();
});

trigger.addEventListener('focus', () => {
  dismissed = false;
  showTooltip();
});

trigger.addEventListener('blur', () => {
  dismissed = false;
  closeIfInactive();
});

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && !tooltip.hidden) {
    dismissed = true;
    hideTooltip();
  }
});

この例では、Escapeキーで閉じてもトリガーのフォーカスは移動しません。

ポインターがトリガーからツールチップへ移るときに隙間ができないよう、配置も確認します。

複数のツールチップを扱う場合は、各要素を個別に初期化し、開いている要素だけを解除する構成へ拡張します。

title属性だけに頼れない理由

ブラウザーが表示を制御するtitle属性のツールチップは、WCAG 1.4.13の対象外となる例として挙げられています。

これは、title属性だけで必要な説明を十分に届けられることを意味しません。

表示方法や閉じ方を制作者が制御できないため、操作に欠かせない情報は見える本文に置き、カスタムツールチップには明示的なキーボード操作とARIAの関連付けを実装します。

リンクやボタンをツールチップへ入れない

ツールチップはフォーカスを受け取らない補足説明として扱うため、内部にリンク、ボタン、フォーム部品を置きません。

追加コンテンツ内で操作が必要なら、ダイアログなど、その操作要素へフォーカスを移せる別のコンポーネントを選びます。

コンポーネント名ではなく、利用者が「読むだけ」なのか「操作する」のかで選ぶと、フォーカス設計が明確になります。

実装後の確認項目

• Tabキーでトリガーへ移動するとツールチップが表示される
• Escapeキーで閉じてもフォーカスはトリガーに残る
• ポインターをツールチップ上へ移しても表示が消えない
• ポインターとフォーカスの両方が外れるまで表示が続く
• 時間だけを理由に自動で閉じない
• 拡大表示や大きなポインターでも内容を読み進められる
• 文字と背景のコントラスト、フォーカスの見え方、画面端でのはみ出しを確認する
• スクリーンリーダーでトリガー名と補足説明の関係を確認する
• タッチ操作でも必須情報を失わない別の提示方法がある

ツールチップは短い補足に限定し、三つの表示条件と実機での確認をそろえて初めて、マウス以外の利用者にも情報を届けられます。