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

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

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

alt属性とtitle属性

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

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

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

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

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

alt属性の特徴

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

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

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

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

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

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

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

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

参考記事

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

title属性の特徴

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

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

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

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

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

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

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

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をつけると文脈や文章構造が変なものになってしまうので、そういったものには

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

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

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

まとめ

以上でalt属性とtitle属性の特徴についての説明を終わります。
今回、調べてみて、alt属性はコンピューター(検索のクローラー)にサイトを分かりやすくする為、title属性はユーザーにサイトを分かりやすくする為にあるものなのかな。と感じました。

画像やテキストを正しくレンダリングしてコンピューターにもユーザーにも分かり易いサイト構築を心がけたいですね。以上井畑でした!!

参考記事

• imgタグにおけるaltの使い方について — ごく簡単なHTMLの説明

“ちゃんと使い分けてる？alt属性とtitle属性の違いについて” への4件のフィードバック

1. リンクのtitle属性って、意味なかったのね。画像のalt属性は大事と私は思うけど。 より:

   2015/04/28 10:51 PM

   […] ちゃんと使い分けてる？alt属性とtitle属性の違いについて｜クリエイティブメモメモ […]

   返信
2. 画像のマークアップはp要素かfigure要素か、使い分けと違い | web sign* より:

   2014/08/29 12:21 AM

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

   返信
3. シュン より:

   2013/07/16 3:17 PM

   いいね。

   返信
   • 井畑 テツヤ より:

     2013/07/17 9:25 PM

     シュンさん

     ありがとうございます!!

     返信