imgタグの属性として「alt」と「title」があります。どちらも画像に対する説明テキストですが、どのように使い分けるのが正しいのか？ちょこっと触れてみます。
alt属性とtitle属性
一般的な使い方はこんな感じでしょうか、
|
1 2 3 4 |
<!-- alt属性 --> <img src="sample.jpg" alt="サンプル画像" /> <!-- title属性 --> <a href="#" title="参考サイト" />○○サイト</a> |
alt属性は画像の代替テキスト
alt属性は、代替テキストと呼ばれ、画像を閲覧することが出来ない環境でも、情報をテキストや音声で得ることが出来るようにするための属性です。音声ブラウザの場合、画像のalt属性のテキストを音声として流してくれます。IEの場合、この属性のテキストがマウスオーバーで「ふきだし」として表示されます。
SEO的に効果が見込まれていたが現在は重要ではない
検索エンジンのロボット（クローラー）は、画像のテキスト等を読むことが出来ないので、alt属性のテキストを読み取る場合があります。確かなことではありませんが、何も記載しないよりはきちんと明記しておいた方が良いでしょう。
title属性はふきだしチップを表示してくれる
IE7以下のバージョンにおいてはalt属性、IE8以上の場合はtitle属性でふきだしを表示してくれます。
alt属性とtitle属性は必要なの？
W3Cでは、「The alt attribute must be specified for the IMG and AREA elements.」となっています。（alt属性は、IMGやAREA要素において指定する必要があります。）
ただし、意味を持たないリストマークや記号の画像に対しては、「alt=””」と空白にして記述しておくと良いでしょう。
HTML5でのimg要素のalt属性の仕様
HTML5ではimg要素のalt属性の仕様が大幅に変更されて詳細な定義がされています。
- alt属性には画像を置換可能な詳細な代替テキストを指定する
- 特定の条件を満たしていればalt属性を省略することが出来る
HTML4/XHTMLのalt属性は画像に関する短い説明（キャプション・タイトル・簡単な説明）を表し、title属性とあまり変わらない仕様となっていましたが、HTML5では、画像をalt属性で置き換えても前後の意味が変わらない代替テキストを指定する必要があります。