この記事の要点

title 属性はほぼ全ての HTML 要素に付けられるグローバル属性。多くのブラウザでマウスホバー時にツールチップを表示 "ホバー時にしか出ない"のでタッチデバイスでは見えない、キーボード操作でも到達できないことが多い → 重要情報を入れてはいけない スクリーンリーダーの読み上げは実装依存 → アクセシビリティが必要なら aria-label / aria-describedby / 可視テキストを使う <abbr title="HyperText Markup Language">HTML</abbr> のような略語展開が代表的用途 カスタムツールチップは CSS の :hover + ::after、または popover 属性 (2024〜) で作る

title 属性とは

title はほぼ全ての HTML 要素に付けられるグローバル属性です。ブラウザは多くの場合、その要素にマウスポインタを乗せたとき小さなツールチップ（黄色や黒の小さな吹き出し）でその文字列を表示します。

<!-- 略語の展開 -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- リンクの補足 -->
<a href="/policy" title="プライバシーポリシー（新しいタブで開きます）">policy</a>

<!-- アイコンボタンの説明 -->
<button title="お気に入りに追加">★</button>

<!-- フォーム要素のヒント -->
<input type="text" name="zip" title="郵便番号は7桁ハイフン無し">

<!-- iframe の説明（必須） -->
<iframe src="..." title="売上ダッシュボード"></iframe>

表示されるタイミング

環境	挙動
デスクトップ（マウス）	ホバー後 1〜2 秒で表示
キーボードフォーカス	多くのブラウザで表示されない（Tab で来ても出ない）
スマホ・タブレット	長押しで表示されることがある（実装依存）
スクリーンリーダー	読まれることもあるが設定依存。NVDA は既定で読まない
iframe	支援技術向けに必須とされる

SEO とアクセシビリティ

SEO 観点

Google は title 属性をランキング要因として強く扱わないと公表しています。alt 属性のように画像の文脈把握には使われませんし、<a title="..."> の文字列がアンカーテキストの代替になることもありません。SEO 目的でキーワードを title 属性に詰めても無意味です。

アクセシビリティ観点

WCAG / WAI-ARIA は title 属性を「最後の手段（last resort）」と位置付けています:

• マウスでしか到達できない
• キーボードユーザーは見ることができないことが多い
• タッチデバイスでも見えない
• スクリーンリーダーが読むかどうかは設定次第
• テキストのスタイルを変えられない（フォントサイズ等の指定不可）

そのため重要な情報を title 属性だけに入れてはいけません。可視テキスト or aria-label 系で冗長に提供してください。

title vs aria-label vs aria-describedby

属性	用途	視覚表示	支援技術
title	補足・ツールチップ	ブラウザ任意	読まれないことが多い
aria-label	要素自体の名前付け（アイコンボタン等）	無し	必ず読まれる
aria-labelledby	別要素のテキストを名前に	無し（その要素は見える）	必ず読まれる
aria-describedby	追加の説明	無し	名前の後に読まれる
可視テキスト	本文・ラベル	あり	確実に伝わる

アイコンボタンの推奨パターン

<!-- ❌ title だけ。タッチユーザー・キーボードユーザーに伝わらない -->
<button title="削除">🗑</button>

<!-- ✅ aria-label で必ず読まれるようにする -->
<button aria-label="削除">🗑</button>

<!-- ✅ さらに視覚的なツールチップも欲しいなら title 併用 -->
<button aria-label="削除" title="削除">🗑</button>

<!-- ✅ ベスト: 可視テキスト + アイコン -->
<button>
  <span aria-hidden="true">🗑</span>
  削除
</button>

abbr 要素での略語展開

title 属性が今でも明確に推奨されるのが <abbr> 要素の略語展開です:

<p>
  本サイトは
  <abbr title="HyperText Markup Language">HTML</abbr> と
  <abbr title="Cascading Style Sheets">CSS</abbr> と
  <abbr title="JavaScript">JS</abbr>
  で書かれています。
</p>

<!-- 同じ略語が複数回出る場合、初出だけで OK -->
<p><abbr title="World Wide Web Consortium">W3C</abbr> は標準化団体。</p>
<p>後続では W3C はそのまま書ける。</p>

CSS で点線下線を出して「ホバーで意味が出る」サインを視覚化するブラウザもあります:

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

CSS のみのカスタムツールチップ

title 属性のスタイルは制御できないため、独自ツールチップを作ることが多いです:

<button class="tip" data-tip="ファイルを保存します">💾</button>

<style>
.tip {
  position: relative;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.tip:hover::after,
.tip:focus-visible::after {  /* ★ focus も必須 */
  opacity: 1;
}
</style>

新しい popover 属性 (2024〜)

2024 年からは HTML 標準の popover 属性で、よりアクセシブルなツールチップが書けます:

<button popovertarget="tip1">？</button>
<div id="tip1" popover>このボタンはヘルプを開きます</div>

よくあるアンチパターン

• 長文を title に入れる → ツールチップが画面外にはみ出る・スクリーンリーダーが途中で切る
• リンクテキストと同じ文字列 → 冗長で読み上げが二重になる
• img の alt 代わりに title → alt が空のままだとスクリーンリーダーが画像を読まない
• 必須情報を title だけに → タッチ・キーボードユーザーに伝わらない

FAQ

Q: img の alt と title の違いは？
A: alt は画像が表示できないときの代替テキスト（必須）。title はホバーでの補足（任意）。両方付けるなら違う内容にする。

Q: iframe に title は必要？
A: 必須に近い扱いです。スクリーンリーダー利用者が iframe の中身を予測できる説明を必ず入れてください。

Q: title="" 空文字を入れるのは？
A: 親要素の title を打ち消す用途で使えますが、通常は属性ごと付けない方が良い。