alt属性（代替テキスト）の役割とは？考慮すべきポイントと記述方法

 

通信速度が遅い場合など、Webページの画像が表示されるまでに時間が掛かることがありますよね！

そんな時に「alt属性」で記述したテキストが画像の代わりに表示されます。

Googleも、その画像自体が何であるかを判断するために、alt属性を利用しています。

今回は、「alt属性」の役割や記述方法についての解説です。

 

alt属性の役割

 

 

alt属性というのは「代替テキスト」とも呼ばれ、画像が表示されるまでの間に、代わりに表示されるテキストを記述するためのタグのことです。

ユーザーは、様々な環境でwebサイトにアクセスしていますが、「alt属性」を記述しておくことで以下のようなメリットがあります。

 

 

「alt属性はSEOとしての効力はあるのか？」ということが気になる方も多いのではないでしょうか？

実は、alt属性に対して施策を実施したことで順位が急激に上昇したりすることはありません。

しかし、「検索エンジンに対して分かりやすいサイト」にすることは、とても重要なことです。

その理由は、検索エンジンは画像の内容を把握することができません。私たちは画像を見てほとんどその内容を理解することができますが、検索エンジンは画像を見て内容を読み取ることが出来ないのです。

そこでalt属性を設定することで、画像が何を表しているのかを検索エンジンが理解することが可能になります。

 

Webページに画像を掲載する場合には、alt属性に画像の中身を簡潔に説明するテキストを含めましょう。

例えば、「涸沢の紅葉写真」をWeb上に載せる場合には次のように記述します。

 

 

 

 

alt属性での考慮する必要があるポイント

 

 

 

alt属性を正しく設定することで、検索エンジンにとっても理解しやすいWebページとなり、画像検索にもヒットする可能性が高まります。

ただし、記述の際に気を付けなければならない点がいくつかあります。

 

 

上記の点に気を付けてalt属性の記述をしましょう！

 

 

どうやって記述するの？

 

 

ではalt属性の記述はどうやればいいのか。

ほとんどのWeb制作ツールには、alt属性の設定機能が搭載されています。

 

WordPressの場合は、左メニューの「メディア」をクリックし、「新規追加」とクリックして、任意の画像を選択（ドラッグ＆ドロップでもよい）します。

 

 

上記画像の「代替テキスト」が、alt属性の記述箇所になります。

「タイトル」にテキストを含めると、画像にカーソルを合わせた際に吹き出しでテキストが表示されるので、alt属性とともに設定しておきましょう。

 

まとめ

 

Webサイトを利用するユーザーは健常者だけではありません。

目が不自由な視覚障害を持ったユーザーは「スクリーンリーダー」を使用してWebサイトを閲覧しています。

alt属性は画像の代替メッセージです。alt属性が何も設定されていない場合、画像の内容がスクリーンリーダーでは読み上げることができません。しかし、alt属性が設定されている場合はその内容もスクリーンリーダーによって読み上げることが可能になります。

サイト運営者は、webを利用するすべてのユーザーにとって使いやすい・分かりやすいサイト作りを目指しましょう！