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

こんにちは。管理人のakiです。
aki
通信速度が遅い場合など、Webページの画像が表示されるまでに時間が掛かることがありますよね!
そんな時に「alt属性」で記述したテキストが画像の代わりに表示されます。
Googleも、その画像自体が何であるかを判断するために、alt属性を利用しています。
今回は、「alt属性」の役割や記述方法についての解説です。
alt属性の役割
ねぇ!akiさん。画像にはalt属性を記述しなさいって、よく聞くんだけど、それってどういうことなの?
あやっぴ
じゃあ今日は、「alt属性」について説明するね。
aki
alt属性というのは「代替テキスト」とも呼ばれ、画像が表示されるまでの間に、代わりに表示されるテキストを記述するためのタグのことです。
ユーザーは、様々な環境でwebサイトにアクセスしていますが、「alt属性」を記述しておくことで以下のようなメリットがあります。
- スクリーンリーダーなどの読み上げソフトを使用する場合、マウスをその画像の上に乗せると、alt属性に入力したテキストが読み上げられる。
- 画像が表示されるまでに時間がかかる場合にも、画像が読み込まれるまでの間alt属性のテキストが表示される。
- Googleなどの検索エンジンに、「何の画像か」を伝えることができる。
「alt属性はSEOとしての効力はあるのか?」ということが気になる方も多いのではないでしょうか?
実は、alt属性に対して施策を実施したことで順位が急激に上昇したりすることはありません。
しかし、「検索エンジンに対して分かりやすいサイト」にすることは、とても重要なことです。
その理由は、検索エンジンは画像の内容を把握することができません。私たちは画像を見てほとんどその内容を理解することができますが、検索エンジンは画像を見て内容を読み取ることが出来ないのです。
そこでalt属性を設定することで、画像が何を表しているのかを検索エンジンが理解することが可能になります。
Webページに画像を掲載する場合には、alt属性に画像の中身を簡潔に説明するテキストを含めましょう。
例えば、「涸沢の紅葉写真」をWeb上に載せる場合には次のように記述します。
<img src=”/karasawa.jpg”
alt=”涸沢の紅葉写真”
title=”涸沢の紅葉写真”>
alt属性での考慮する必要があるポイント
画像を載せたら全てにalt属性を記述しなければならないの?どうやって記述すればいいの?
あやっぴ
それじゃあ、ここからはalt属性を設定する場合のポイントや記述方法について説明するね。
aki
alt属性を正しく設定することで、検索エンジンにとっても理解しやすいWebページとなり、画像検索にもヒットする可能性が高まります。
ただし、記述の際に気を付けなければならない点がいくつかあります。
全ての画像にalt属性を含める必要はない
Webサイトのデザイン上で使用されているスペーサーや画像には、alt属性を使用する必要はありません。
無関係なキーワードを詰め込まない
alt属性に無関係なキーワードを詰め込むのことは。ガイドライン違反に当たります。
簡潔に記述する
長い文章ではなく、簡潔に記述するようにしましょう。
上記の点に気を付けてalt属性の記述をしましょう!
どうやって記述するの?
ではalt属性の記述はどうやればいいのか。
ほとんどのWeb制作ツールには、alt属性の設定機能が搭載されています。
WordPressの場合は、左メニューの「メディア」をクリックし、「新規追加」とクリックして、任意の画像を選択(ドラッグ&ドロップでもよい)します。
上記画像の「代替テキスト」が、alt属性の記述箇所になります。
「タイトル」にテキストを含めると、画像にカーソルを合わせた際に吹き出しでテキストが表示されるので、alt属性とともに設定しておきましょう。
まとめ
Webサイトを利用するユーザーは健常者だけではありません。
目が不自由な視覚障害を持ったユーザーは「スクリーンリーダー」を使用してWebサイトを閲覧しています。
alt属性は画像の代替メッセージです。alt属性が何も設定されていない場合、画像の内容がスクリーンリーダーでは読み上げることができません。しかし、alt属性が設定されている場合はその内容もスクリーンリーダーによって読み上げることが可能になります。
サイト運営者は、webを利用するすべてのユーザーにとって使いやすい・分かりやすいサイト作りを目指しましょう!
