サイト制作

画像のalt属性の書き方｜情報画像・装飾画像・ボタンで使い分ける

慈愛妃きづな

2026-10-28

この記事には広告・アフィリエイトリンクが含まれます。

altは画像がそのページで伝える情報や操作の目的に合わせて書きます。装飾画像には空のalt、画像ボタンには操作内容を示す方法があります。本文との重複を避け、図表の詳しい情報は本文などでも読めるようにします。

画像を置く目的に合わせて代替テキストを選ぶ

商品の写真、予約のボタン、記事の背景に置く花。同じ画像でも、ページで担っている仕事は違います。画像を見られないときに代わりとなるテキスト、altを考えるなら、何が写っているかだけでなく、何のために置いたかを見たいです。

W3Cの画像チュートリアルも、情報を伝える画像、装飾の画像、機能を持つ画像などを分けています。画像の数だけ説明を長く付ければ親切、とは限らないんですね。

例えば同じ橋の写真でも、旅行の記事で景観を紹介するのか、通行できる歩道の位置を説明するのかで、必要な情報が変わります。「橋の写真」とだけ書くより、その文脈で見てほしいところを言葉にします。

一方、グラフや図の詳しい内容は、一言のaltだけへ押し込むと読み取りにくくなります。図から得る結論やデータを、本文や別の説明でもたどれるようにする。私は、情報へ着けることを先に考えたいです。

理解に必要な情報を持たない装飾画像には、空のaltを使う方法が案内されています。空にすることと、属性を何も考えず付け忘れることは違います。本文ですでに伝わっている情報を、画像でも何度も読ませる必要があるかも見ます。

画像のリンクやボタンなら、風景の描写より、押すと何ができるかが重要です。プリンターの絵を説明するより「印刷する」と分かった方が、操作を選べますよね。

私なら、画像を一枚ずつ採点するだけでなく、本文と一緒に読む順番で点検します。説明が重なっていないか、操作先が分かるか、画像がなくても判断に必要な内容が残るかを見るんです。

検索対策の言葉を詰め込む欄ではありません。見せたいページの情報を、別の方法でも受け取れるようにする欄です。画像を置いた理由を短く答えられると、altの内容も選びやすくなりそうですね。