HTML title属性の使い方と限界（abbr / a / アクセシビリティ / aria-label との違い）

アクセシビリティ観点

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

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

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

title vs aria-label vs 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 を打ち消す用途で使えますが、通常は属性ごと付けない方が良い。