先日Twitterで問いかけた所色々な意見が出たtitle属性の使い方について少々まとめてみることにしました。事の始まりはh1を画像で表現したい場合、どのようなマークアップが良いのだろうか？と言う問いかけが発端です。

title = text [CS]
この属性は、当該要素に関する助言的情報を提供する。
文書全体に関する情報を提供し1文書に1度しか出現し得ないTITLE要素とは異なり、 title属性は幾つの要素に現れてもよい。 ある要素がtitle属性をサポートしているかどうかについては、当該要素の定義を参照されたい。

要するにW3Cの仕様では要素に大して補足的な説明が必要な時に使用する属性な訳です。

FirefoxやOpera、Safariはalt属性をツールチップで表示しないため、alt属性と合わせてimg要素なんかにtitle属性を併記する使い方は間違ってると言う事になりますね（そもそもあまり使われてないか...）。

例えば不動産の情報を提供している○○ハウジングがあったとします。画像で出来たロゴがh1要素でマークアップされています。またこの画像はa要素でマークアップされてます。この場合はどのようにマークアップすべきか？

私の考え方だと以下のマークアップがベストのような気がします。

<h1 title="不動産情報を提供している○○ハウジングのウェブサイト"><a href="index.html" title="○○ハウジングウェブサイトトップに移動します"><img src="logo.gif" alt="○○ハウジングロゴ画像" /></a></h1>

h1にtitle属性を入れたのは画像はあくまでもロゴであり、見出しとなるh1要素本来の意味が伝わらないと解釈したからです。a要素にはこのリンクが何を意味するかの補足説明をtitle属性で入れる必要があるでしょう。ちなみにこのマークアップでツールチップに表示されるのはa要素のtitle属性になります。

このようにコーダーが考えてしまうようなケースは作業の遅れにつながるのできちんとガイドラインに入れるべきではないでしょうか？