alt属性とは？画像の代替テキストの役割

alt属性とは何か

alt属性は、画像が表す内容を文章で説明するための代替テキストです。画像タグに添える短い説明で、画像そのものが表示できないときに、その画像の代わりとして使われます。

通信エラーで画像が読み込めなかったとき、ブラウザは画像の場所にalt属性の文章を表示します。つまりaltは「画像が見えないときの保険」として機能します。

見える人の画面ではふだん表示されないため軽視されがちですが、画像の意味を言葉で残しておく重要な情報です。

アクセシビリティでの役割

altの最も大切な役割はアクセシビリティです。視覚障害のある人はスクリーンリーダーという読み上げソフトを使ってページを利用しますが、画像はそのままでは読み上げられません。代わりに読み上げられるのがalt属性です。

たとえば「青いボタン」とだけ書くより、「資料をダウンロード」のように画像の役割を伝える文章にすると、操作の意図まで届きます。装飾だけの画像なら、あえてaltを空にして読み上げ対象から外すのが適切な場合もあります。

実務ではどこで関係する？

alt属性は言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

alt属性について迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

SEOでの役割

検索エンジンは画像の中身を人ほど正確には理解できません。そこでalt属性のテキストを手がかりに、画像が何を表すかを判断します。適切なaltは画像検索での発見につながり、ページ全体の文脈理解も助けます。

ただしSEOを狙ってキーワードを詰め込むのは逆効果です。altはあくまで画像を説明するもの。不自然な羅列はスパムと見なされる恐れがあり、読み上げにも邪魔になります。

良いalt属性を書く手順

altは長ければよいわけではありません。その画像が画面から消えても情報が伝わるか、を基準に簡潔に書きます。

迷ったら「この画像を声に出して説明するなら何と言うか」を考えると書きやすくなります。次の流れで一つずつ整えていきましょう。

1. その画像が何を伝えているか、目的を一言で考える
2. 見たままでなく「役割」を書く（例：会社ロゴ→会社名）
3. 簡潔にまとめる（おおむね一文程度を目安にする）
4. キーワードの詰め込みや「〜の画像」という冗長な表現を避ける
5. 装飾目的の画像はaltを空にして読み上げ対象から外す

画像入りページを共有して確認する

altが適切かは、実際にページを開いて確認するのが確実です。画像が多いLPやカタログでは、関係者に見てもらいながら抜けや不自然な記述を洗い出すと精度が上がります。

ギガサイト便なら、画像を含むZIPサイトをそのまま共有URLとして発行でき、関係者に開いてもらって確認・レビューを受けられます。同じURLのまま中身を差し替えられるので、altを直した後もリンクを送り直さずに更新版を見てもらえます。