alt属性の基本と画像説明の書き方

alt属性は、画像の内容を言葉で伝えるためにHTMLへ記述する代替テキストです。画像ごとに役割を考え、ページの文脈に合う説明を付けます。

検索対策だけを意識して言葉を増やすと、画像の説明として不自然になります。アクセシビリティの観点も含め、画像を見ない状態で何を伝える必要があるかを先に考えます。

alt属性は画像を説明する文章

Google Search Centralは、画像についてメタデータを提供するうえで、代替テキストを重要な属性として説明しています。代替テキストは、画像について説明する文章です。

この説明はGoogle Search Centralの画像ガイドで確認できます。検索順位を約束する仕組みではなく、画像の内容を正確に表す情報として扱います。

<img src="handbag-red.jpg" alt="赤いレザーハンドバッグ">

例では、画像を見なくても対象が分かる短い説明を入れています。実際には、同じ画像でもページ内の役割によって必要な説明が変わります。

まず、画像が本文の情報を伝えているか、見た目を整えるための装飾かを分けます。情報を伝える画像なら、読者が理解に必要とする内容を文章にします。

前後の本文ですでに説明している内容を、そのまま長く繰り返す必要はありません。画像が加えている情報だけを選び、ページの流れに合わせます。

担当者の主観だけで決めず、画像を表示しない状態で本文を読みます。意味が欠ける場所を見つけると、alt属性へ入れる内容を判断しやすくなります。

商品や設備など、対象そのものを示す画像では、識別に必要な特徴を選びます。確認できない素材、用途、状態を想像で補わないことが大切です。

図や案内画像では、画像が伝える結論を文章で示します。画像内の文字をすべて並べるのではなく、本文との関係を考えて必要な情報をまとめます。

リンクになっている画像は、画像の見た目だけでなく、操作後に何を確認できるかも点検します。実装方法は利用環境の公式資料と照合します。

装飾として扱う画像では、内容を読み上げる必要がない場合があります。ただし、alt属性を空にすることと、属性自体を書かないことを同じ扱いにはできません。

web.devの画像アクセシビリティ解説でも、空またはnullのalt属性と、alt属性がない状態では意味が異なると説明しています。

そのため、内容がないという理由だけで属性を削除しません。画像の役割を確認し、情報を伝える画像と装飾画像を分けて設定します。

Google Search Centralは、alt属性へキーワードを羅列する行為を避けるよう案内しています。検索されそうな言葉ではなく、画像を説明するために必要な言葉を選びます。

商品名や地名を入れる場合も、画像から確認でき、文脈上必要かを判断します。同じ言葉を画像ごとにコピーすると、個々の画像の違いを説明できません。

完成後はalt属性だけを一覧で読み、不自然な反復がないか確認します。本文を読まずに意味が通ることより、画像と周辺文の関係が正確であることを優先します。

管理画面へ入力しただけで作業を終えず、公開ページのHTMLに意図した内容が出ているかを確認します。入力欄の名称から出力結果を推測しないためです。

共通の画像や自動生成される部品は、一つの変更が複数ページへ影響することがあります。対象ページを一覧にし、代表的な画面だけで確認を終えません。

画像を差し替えたときは、以前の説明が残っていないかを見ます。変更した画像、alt属性、確認したページを同じ作業記録へ残します。

画像を含むページの改善範囲はWebサイト制作・運用サービスで確認できます。対象ページの状況は、問い合わせ窓口へ共有できます。

alt属性は、画像の役割を文章へ置き換える小さな編集作業です。公式資料を確認し、正確さ、文脈、実際の出力を順に見直しましょう。