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

アクセシビリティ観点

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

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

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

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