HTML
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
alt属性
alt属性は、"alternative text"（代替テキスト）の略であり、画像の代わりとなるテキストを指定するために使用されます。
これは、画像が読み込まれなかった場合、画像が含まれるコンテンツが視覚障害を持つユーザーにも理解できるようにするため、また、検索エンジンにコンテンツを理解しやすくするために役立ちます。
alt属性は、以下のように指定することができます。
HTML
<img src="example.jpg" alt="ここに代替テキストを入力します">alt属性の値は、画像の説明や内容を簡潔に表現する必要があります。また、画像内のテキストやキャプションと重複しないようにする必要があります。
alt属性は、画像が装飾目的である場合には省略することができますが、省略はなるべく避け、原則として画像に対しては alt属性と適切な代替テキストを指定するのが望ましいでしょう。
alt属性を適切に記述することで、検索エンジンとユーザー、両者に優しいサイトに近づきます。しかし、alt属性を適切に記述したからといって急激に掲載順位が上がるわけではありません。alt属性の機能は、あくまで検索エンジンに適切な画像内容を伝えることであり、コンテンツを検索エンジンやユーザーにわかりやすくする役割を担うものです。
仕様書内で厳密に規定された alt属性値の付け方
HTML5 の仕様書内では、alt属性値に入れるテキストに関して厳密に規定されています。
単に画像のタイトルを入れるのではなく、その画像が表すものを文章として説明する必要があります。例えば、通信環境などが原因で画像が表示されない時に、文章中に画像が埋め込まれていた場合、画像を取り除いて本文と代替テキストだけを残した場合でも、その文章が問題なくつながるような内容とすることが求められています。
検索エンジンの画像理解に役立つ
検索エンジンが画像のみでその内容を完全に理解することは困難だといわれています。そのため、画像の正確な内容を伝えるには、下記のような手段で情報を補足する必要があります。
- タグに含まれる alt属性
- 画像周辺のテキスト
- 画像に張られたリンクのアンカーテキスト
- 画像のファイル名
- 画像のサイトマップ
上記の中でも alt属性は基本的な手段で、タグの中に画像の内容を記述して設定します。alt属性を記述すると、検索エンジンにコンテンツの内容を正確に伝えられるというメリットがあり、画像検索において上位表示を狙う場合には重要な要素です。
画像検索結果で上位表示されることで、新たな集客チャネルとなりうるのもメリットといえるでしょう。
画像の代替テキスト
alt属性は検索エンジンだけではなく、ユーザーの役にも立ちます。例えば、通信状態が悪く画像が表示されない場合、テキストで画像の内容を補完してくれたり、音声読み上げ機能を使用した際の読み上げテキストとして役立ったりします。
視覚障害を持った方や高齢者の方、また通信環境の良し悪しに関わらず利用の際の手助けになります。alt属性を適切に記述していると、検索エンジンだけでなくユーザーにとっても「利用しやすいコンテンツ」になるのです。
alt属性と title属性の違い
alt属性と類似した言葉に title属性があります。ここで注意しておきたいのは、alt属性が画像の代替テキストであるのに対して、title属性は画像に対して助言的説明をするものだということです。簡単にいってしまうと alt属性は画像そのものを指し示すのに対し、titleは補足説明を示してくれます。
一般的なブラウザでは、title属性を記述した画像の上にカーソルをのせると、吹き出しが表示され、その吹き出しに画像の補助的説明が表示されます。さらにもう一つの違いとして、alt属性は画像以外には設定できませんが、title属性はグローバル属性なので画像やテキストなどすべての要素に設定することができます。
また、alt属性と title属性を誤解してしまう方が多いです。title属性を alt属性と勘違いしてしまい、「alt属性が表示されない」と思い込んでしまっているケースがみられるようです。
多数のキーワードを詰め込まない
alt属性にキーワードを詰め込みすぎるのは控えましょう。
キーワードを詰め込んでしまうと画像の内容が伝わりづらくなります。
さらに、スパム行為と認識され、検索エンジンからペナルティを受けてしまう可能性もありますので、画像に関係のないキーワードの記述は避けるべきです。
alt属性を設定する際には、画像の内容に沿った必要最低限のキーワードを簡潔に記述しましょう。
装飾目的の画像の場合、alt属性は空でもよい
alt属性は基本的に記述した方がいいとされていますが、すべての画像に記述する必要はありません。
記述の必要がない例として、意味を持たない装飾目的で使われる画像があげられます。背景画像やラインマーカーがこれに当てはまります。これらは装飾目的で使用しているため、コンテンツとして意味をもちません。
意味をもたない画像の場合、alt属性は記述せず、空白のままにしておきます。
ここで注意点として、「alt=""」と "" 内は空白にするものの、「alt=""」は必ず記述する必要があります。忘れず記述しましょう。
タイトル・見出し・リンクになっている場合は必ず alt属性を記述する
画像が title要素や h1〜h6要素、a要素である場合は、見出しやリンクの遷移先の内容をきちんと伝えるため、必ず alt属性を記述する必要があります。
alt属性はリンクが発生する画像のアンカーテキストの代わりになる役割があるため、リンクがある画像に alt属性が記述されていない場合、検索エンジンがリンク先のページを把握しづらくなってしまいます。
alt属性を簡単に確認できる方法
alt属性が適切に記述されているかを確認する方法として、以下の２通りの方法を紹介します。
- Googleの検証機能を使う方法
- Googleの拡張機能を使う方法
alt属性を設定した画像
Googleの検証機能を使う方法
ツールを使わない方法として、Googleの検証機能を使って確認する方法があります。
検証機能の使い方は簡単で、まず調査したい画像の上で右クリックをし、その後に「検証」をクリックします。
画面上にページのソースコードが表示され、対象のソースコードに色がついて表示されます。
Chrome拡張機能「Alt&Meta viewer」を使う方法
Chrome拡張機能「Alt&Meta viewer」という無料ツールを使用して alt属性を確認することができます。
Chromeウェブストアから「Alt&Meta viewer」と検索した後、「Chromeに追加」をクリックするとインストールできます。
このツールを使用すると、alt属性やtitle属性をツールチップとして表示できます。
Chromeブラウザの右上の「Alt」をクリックするだけで、alt属性が記述されているのか簡単に確認できます。
alt属性が表示されない場合
ブラウザが原因で alt属性が表示されない場合があります。
例えば、スマートフォンや IE11・IE8のブラウザなどでは表示されないようになっています。