タイトル: title属性でツールチップを表示する
SEOタイトル: HTML title属性の使い方と限界（abbr / a / アクセシビリティ / aria-label との違い）
| この記事の要点 |
|
title 属性とは
title はほぼ全ての HTML 要素に付けられるグローバル属性です。ブラウザは多くの場合、その要素にマウスポインタを乗せたとき小さなツールチップ（黄色や黒の小さな吹き出し）でその文字列を表示します。
HTML
policy
表示されるタイミング
| 環境 | 挙動 |
|---|---|
| デスクトップ（マウス） | ホバー後 1〜2 秒で表示 |
| キーボードフォーカス | 多くのブラウザで表示されない（Tab で来ても出ない） |
| スマホ・タブレット | 長押しで表示されることがある（実装依存） |
| スクリーンリーダー | 読まれることもあるが設定依存。NVDA は既定で読まない |
| iframe | 支援技術向けに必須とされる |
SEO とアクセシビリティ
SEO 観点
Google は title 属性をランキング要因として強く扱わないと公表しています。alt 属性のように画像の文脈把握には使われませんし、`` の文字列がアンカーテキストの代替になることもありません。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 | 追加の説明 | 無し | 名前の後に読まれる |
| 可視テキスト | 本文・ラベル | あり | 確実に伝わる |
アイコンボタンの推奨パターン
abbr 要素での略語展開
title 属性が今でも明確に推奨されるのが 要素の略語展開です:
本サイトは
HTML と
CSS と
JS
で書かれています。
W3C は標準化団体。
後続では W3C はそのまま書ける。
CSS で点線下線を出して「ホバーで意味が出る」サインを視覚化するブラウザもあります:
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}CSS のみのカスタムツールチップ
title 属性のスタイルは制御できないため、独自ツールチップを作ることが多いです:
新しい popover 属性 (2024〜)
2024 年からは HTML 標準の popover 属性で、よりアクセシブルなツールチップが書けます:
このボタンはヘルプを開きますよくあるアンチパターン
- 長文を title に入れる → ツールチップが画面外にはみ出る・スクリーンリーダーが途中で切る
- リンクテキストと同じ文字列 → 冗長で読み上げが二重になる
- img の alt 代わりに title → alt が空のままだとスクリーンリーダーが画像を読まない
- 必須情報を title だけに → タッチ・キーボードユーザーに伝わらない
FAQ
Q: img の alt と title の違いは？
A: alt は画像が表示できないときの代替テキスト（必須）。title はホバーでの補足（任意）。両方付けるなら違う内容にする。
Q: iframe に title は必要？
A: 必須に近い扱いです。スクリーンリーダー利用者が iframe の中身を予測できる説明を必ず入れてください。
Q: title="" 空文字を入れるのは？
A: 親要素の title を打ち消す用途で使えますが、通常は属性ごと付けない方が良い。