マークアップ時にtitle属性の必要性に関して、数秒でも時間を費やすのが煩わしいので、整理して、投稿いたします。
title属性とは
- グローバル属性なので、全ての要素（タグ）に追加することができる
- ツールチップに助言的な情報を表示するもの
「Button1です」がツールチップ
W3Cが定義しているtitle属性の使用用途
- リンク： タイトルもしくは対象リソースの記述
- 画像： タイトルもしくは説明
- 段落： 脚注もしくは解説
- 引用： ソースの詳細情報
- インタラクティブコンテンツ： 用途に対する分類や指示など
インタラクティブコンテンツの例： a, button, input, img, label, select, texture, video
title属性の使い分け（本題）
アイコンや記号以外では使用しないのが適切かと思います。
※もちろんimgタグには、title属性を入れないことで統一するということです。
理由は、下記の２つの観点からです。
SEOの観点から
- Imgタグは、alt属性が代替テキストの役割を担っている
- alt属性などのテキストコンテンツと重複させると、スパムとして捉えられる可能性がある
- スマホ、タブレットでは、ツールチップが表示されないので、PCとの差異が生まれる
- 有無がクローラの評価に影響しない可能性がある
見た目の観点から
- コンテンツの上に表示される
- 一律、シンプルなデザインのため、ページの世界観を壊す可能性がある
実例
ヤフーのホームページにて、検索窓直下に三角があります。
この三角をホバーして２秒待つと、「キーワード入力補助を開く」というツールチップが開きます。
例外
W3Cがtitle属性を推奨しているもの
- link
- abbr
- dfn
- menuitem そのタグを使うかどうかは置いといて。
abbrは、略語を指す時に使用する
<p>最近、<abbr title=“ProgressiveWebApplication”>pwa</abbr>が気になっている。</p>
pwaは略称であり、本当は、ProgressiveWebApplicationと言うことを伝えることができます。
伝えるのは、ユーザーだけでなくクローラに対してもだと思います。
所感
ツールチップが表示されるまで2くらいかかるので、むしろ、使わないくらいの感覚でいいと思います。
title属性は使わず、ツールチップ自体の使い方は工夫できると思います。
参考：w3c