MERIT 1画像の内容把握に役立つ

alt属性を設定しておくと、何らかの要因で画像が表示されなくても、テキストベースで情報を伝えることができます。

また、文章中に挿入しているイラストや図表が重要な情報を含んでいる場合、alt属性が正しく記載されていることで、Googleクローラーが画像情報を理解できます。

MERIT 2ユーザーの役に立つ

alt属性は、以下のようなユーザーの役に立ちます。

• スクリーンリーダー（画面読み上げ用ソフトウェア）を利用する人
• ブラウザの読み上げ機能を利用する人
• 通信環境が悪い人

スクリーンリーダーでは、文章以外の情報を読み上げることができません。

そこで、alt属性を入れることにより、画像の要素を文字ベースでチェックでき、正確な情報をユーザーに伝えることが可能になります。

また、「ネット回線が遅い」「画像の読み込みエラーが発生した」という場合でも、画像の要素が文字で表示されるため、ユーザーは何が表示されているのか把握できるのです。

MERIT 3テキストと画像の関連性の向上

alt属性を正しく入れておくことで、テキストと画像の関連性を強める助けにもなります。

alt属性には「画像が何を表しているのか説明する役割」があるため、ユーザーはウェブページのコンテンツをより一貫して理解しやすくなります。

また、alt属性を正しく記載しておくと、検索エンジンも画像を理解しやすくなり、関連する検索クエリの結果に表示される可能性が高まります。

POINT 1簡潔な文章を設定する

alt属性は、視覚障害やその他の理由で画像を表示できないユーザーがいた場合に役立つ文字情報です。画像が何を表しているのか、簡潔に伝わるように意識しましょう。

例えば、犬の画像であれば「ソファで寝ている犬」や「公園で走っている犬」など、画像を具体的にイメージしやすい表現で記述してください。

POINT 2デザイン目的の画像のalt属性はなしでも可

一部の画像は、デザインや装飾目的で使用されることがあります。

例えば、「背景画像」「装飾画像」「ラインマーカー」といった画像が該当します。

これらの画像はコンテンツとして直接的な意味を持たないため、代替テキストの記載を省略しても問題ありません。

ただし、代替テキストを書き込まない場合でも「alt=””」の記述は必要なので、忘れないように注意してください。

例）alt属性を入れない場合の記述法

POINT 3キーワードを詰め込み過ぎない

ごくまれに、過度にキーワードを盛り込んでいるalt属性を見かけることがあります。

これは不適切なSEO対策で、評価を高めるどころかスパム判定されてペナルティを受ける可能性があるため絶対に避けましょう。

× alt属性の良くない例

○ alt属性の良い例

alt属性は画像の特徴や意味を的確に説明するために使用するものなので、自然で読みやすい文章を重視しましょう。

POINT 4「～の画像」はNG

alt属性は画像の要素を伝える文字情報であるため、わざわざ「～の画像」といった文言を入れる必要はありません。

例えば、犬の画像に「犬の画像」と記載するのは不適切です。代わりに、「走っている犬」や「ボールを追いかける犬」など、画像の特徴が正確に伝わる記述をしましょう。

METHOD 1Chromeの確認方法

以下の手順で、確認できます。

1. 確認したいalt属性があるページを開く
2. 確認対象の画像にカーソルを合わせ、右クリック→［検証］を選択
3. ページのソースコードが表示される
4. 強調表示されている<img src=”画像URL” alt=”画像説明”>の「画像説明」部分を確認する

該当ページを開いて「F12キー」を押すだけでも検証画面を表示させることはできます。

しかし、画像のソースコードが強調表示されず探し出す手間が発生するため、上記の方法をおすすめします。

METHOD 2拡張機能で確認

Chromeの「Alt＆Meta viewer」という無料の拡張機能を使って、alt属性を確認することもできます。

以下の手順で、使用できます。

1. Chromeウェブストアを開き『Alt＆Meta viewer』を検索して［Chromeに追加］する
2. 確認したいalt属性があるページを開き、ブラウザ画面の右上に追加された「Alt」をクリック
3. ロードが完了すると、alt属性に加えてtitle属性、画像サイズといった情報がツールチップで表示される