ちゃんと使い分けてる？alt属性とtitle属性の違いについて

2012/06/05 tips

こんにちは、井畑です。
今回は、alt属性とtitle属性についてです。この２つは、似たような意味合いのタグですが、実は用途が大きく違います。自分自身、最初のころは混同していたので、復習もかねて記事にしてみました。

よく使う属性値だからこそ、ちゃんと理解して使いたいですよね。
それではどうぞ！

追記:2012/06/06 12:40

twitterより記事の内容にご指摘を受けたので追記しました。追記した内容は以下の通りです。

追記:alt属性はimg要素だけのものではない
追記:IEでもバージョンによってチップは表示される
追記:HTML5でのimg要素のalt属性の仕様

alt属性とtitle属性

alt属性とtitle属性は以下のように使われます。

HTML

<!--alt属性-->
<img src="hoge.jpg" alt="眠い">

<!--title属性-->
<a title="早く帰りたい" href="#">クリエイティブメモメモ</a>

はい。よく見かける使い方ですね。というか、この使われ方しか見たことないかも…僕自身、勉強し始めたころは画像にはalt リンクにはtitleをつけるものだと思っていました。

では、次に各属性の特徴について説明していきます。

alt属性の特徴

まずは、alt属性の特徴をみてみましょう。

alt属性はimg要素だけのもの

「オレ…ずっとimgの事だけ見てるから･･･///」

予想通りだった訳ですが、altはimg要素にだけつくものです。
一途ですねぇ…これが愛っ!!(違う)

追記:alt属性はimg要素だけのものではない

twitterよりご指摘いただきました。alt属性はimgだけでなく、area、applet、inputに対しても付くようです。

Objects, Images, and Applets in HTML documents/W3C

Objects, Images, and Applets in HTML documents/W3C勧告私的日本語訳

alt属性は画像の代替テキスト

alt属性は代替テキストと呼ばれ、画像を閲覧することができない環境でも、情報をテキストや音声で得ることが、出来るようにするための属性です。
音声ブラウザの場合、画像のalt属性のテキストを音声として流してくれます。

IEの場合、この属性にのテキストがマウスオーバーで「ふきだし」として表示されます。他のブラウザは表示されません。

SEOにも効果があるとされている

alt要素はSEOにも効果があるとされている

また、検索エンジンのロボット(クローラー)は、画像のテキスト等をよむことが出来ないので、alt属性のテキストを読み取ります。なので、SEO的にも役割があるのが特徴です。※すべての検索エンジンがalt属性内のテキストをキーワードとして認識しているわけではありません。近年SEO的には効果が無いという説もあります。…信じるか信じないかはあなた次第です!!

参考記事

イメージリンクのalt属性はしっかり記述する/パシのWP SEOブログ

title属性の特徴

次に、title属性の特徴です。

title属性は全ての要素に使える

altがimg要素にしか付かないのに対し、title属性は全ての要素に含めることができます。
よくリンクについている属性なのでリンク専用だと思っている人も多いかもしれませんが、そういう訳ではありません。~~なんて浮気性なのかしらっ!!このめすb…~~

title属性はふきだしチップを表示してくれる

文字にしても伝わりづらいと思ったので、例として下記の文章をspan要素で囲み、属性をつけてみました。カーソルを重ねてみてください。文字があらわれるはずです。

カーソルをあわせてみてみて

ちなみに、IEはこのtitle属性をサポートしていないためチップを表示しません。代わりにalt属性の中身を表示します。

追記:IEでもバージョンによってチップは表示される

twitterでご指摘いただきました。IEでもIE8以上ならふきだしチップを表示してくれます。

SEO効果は少ない

title属性にSEO効果は少ない

tltle属性を指定することでSEOを上げる話も無くはないですが、alt属性より信憑性がさらに薄く、効果のほどは分かりません。多くの人は効果なしとしています。ここにSEOの効果を来たいするのであれば他を頑張ったほうが良いかと僕は考えます。

title属性は説明

「title属性」はつけたものに対する説明（助言的情報）を書くのが正しい使い方のです。
「title」なのに助言っていうのは変な感じですねwwリンクの説明にも、画像の説明にも使えます。なので、画像にはalt属性もtitle属性も同時に使うことが出来ます。

ただ、先程述べたように、title属性はSEOに効果は無いので、ユーザビリティーの向上として、例えば「リンク先」や「画像」の補足説明のように使うのが、良いのかなと思います。ただ、使いすぎるとあちらこちらで”ふきだしチップ”が出て、逆に見づらくなってしまうので注意が必要です。

alt属性とtitle属性は必要か

alt属性の必要性について、W3Cでは以下のように紹介しています。

The alt attribute must be specified for the IMG and AREA elements.

ふむ…~~(英語よく分からん)~~
つまりXHTMLではimgタグのalt属性は必須です。なぜなら何らかの問題で画像が表示できない場合にも文書の意味内容が伝わるようにするためです。

ただ、意味を持たない装飾や記号等にまで「装飾のバラ」とか「びっくりマーク」等のaltをつけると文脈や文章構造が変なものになってしまうので、そういったものには

HTML

<img src="hoge.jpg" alt="">

のようにalt内を空白にしていれておきましょう。

一方のtitle属性は必須ではありません。ツールチップが出てしまうことで、そもそも表示できている画像が見づらくなるなど、不必要と判断した場合は、省略しても問題ありません。
というか、自分的には手間を加味するとほとんどの場面で使わなくてもいいような気がします…どうなんでしょうか？他の方々のご意見も聞いてみたいです!!

追記:HTML5でのimg要素のalt属性の仕様

色々書いてきましたが、alt属性の仕様がHTML5になるとがらりと変わるようです。今知った…情弱乙orz
仕様の変更については下記の記事をご参考ください。