サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

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

greeden
selective focus photography of woman holding book

Photo by Leah Newhouse on Pexels.com

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

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

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

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

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

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

情報や機能 適した提示方法 判断の理由
アイコンの短い補足 ツールチップ 操作を止めずに簡潔な説明を加えられる
入力に必須の条件 常に見える説明文 ツールチップを開けない状況でも情報を失わない
リンクやボタンを含む案内 ダイアログなどのフォーカス可能なポップアップ ツールチップ自体はフォーカスを受け取らず、操作要素を入れないため

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

WCAG 1.4.13が求める三つの条件

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

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

条件 求められる動作 確認方法
解除可能 ポインターやキーボードフォーカスを動かさずに追加コンテンツを閉じられる 表示中にEscapeキーを押し、フォーカスを保ったまま閉じるか確認する
ホバー可能 ポインターをトリガーからツールチップへ移しても消えない ツールチップの端までポインターを動かし、内容を読み続けられるか確認する
持続性 ホバーやフォーカスが外れる、利用者が閉じる、情報が無効になる、のいずれかまで表示を保つ 一定時間で勝手に消えないことと、操作を終えたときに閉じることを確認する

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

実務では、配置による例外だけに頼らず、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の関連付けを実装します。

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

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

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

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

実装後の確認項目

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

この記事に関連する株式会社greedenの取り組み

ツールチップは、表示できるだけでなく、キーボードや拡大表示でも情報を失わないかの確認が欠かせません。株式会社greedenは、Webアクセシビリティサービス「UUU」の導入とチェックを通じ、サイト改善の第一歩を支援します。

モバイルバージョンを終了