画像のaltに何を書けばいいか、手が止まることはありませんか。
「画像の内容を説明する」と言われても、ロゴなら「会社のロゴ」でいいのか。記事に添えた写真は、写っているものを全部書くのか。考え始めると、意外に迷います。
先に答えると、altは空欄でよい場合もあります。大切なのは、画像を見なくても、必要な情報やリンク先が分かることです。
まずは、altが誰に何を伝えているのかから考えてみましょう。
altは、画像を見ずに読む人にも届く言葉
サイトを読む方法は、画面を目で見ることだけではありません。スクリーンリーダーという、画面の情報を音声などで伝えるソフトを使う人もいます。
画像に書かれた文字や写真の内容は、そのままでは伝わらないことがあります。そこで、画像の代わりに情報を伝えるのがaltです。
例えば、虫めがねの画像だけがある検索ボタン。
見えている人には「ここを押すと検索できそう」と分かっても、音声で「虫めがね」と伝えられたら、何をする場所なのか少し考えてしまいます。「検索」なら、操作が伝わります。
写っているものを正確に説明することと、その場所で必要な情報を伝えることは、少し違うんですね。 W3Cの解説でも、リンクやボタンの画像では、行き先や操作を伝えるよう案内しています。
空欄と「altを書かない」は、同じではない
一方で、すべての画像を説明すると、かえって読みにくくなることもあります。
例えば、文章の区切りに置いた飾りの画像。その画像を見なくても、記事の内容は変わりません。読む途中で毎回「葉っぱの飾り」と説明されたら、本文を追う邪魔になりそうです。
こうした画像には、空のaltを指定します。
<img src="decoration.png" alt="">alt=""は、「この画像について、代わりに伝える文字はありません」という指定です。
ここで迷いやすいのが、「何も書かないなら、alt自体を消しても同じでは？」というところです。
実は、同じではありません。altがないと、一部のスクリーンリーダーでは、画像のファイル名が読み上げられることがあります。W3C：装飾画像の扱い
例えば「decoration_02.png」と伝えられても、読んでいる人には何のことか分かりません。
説明が要らない画像だからこそ、空欄を明示する。 書き忘れと区別するために、alt=""は残しておきます。
「role=”presentation”も付ける」は、書き方によってはエラーになる
装飾画像の書き方として、alt="" に role="presentation" を添える形を紹介している解説もあります。
ただ、この2つを一緒に書いた状態でHTMLの検査ツール（Nu Html Checker）にかけたところ、エラーが返りました。2026年9月7日時点の結果です。
<img src="decoration.png" alt="" role="presentation">An “img” element with a “role” attribute must not have an “alt” attribute whose value is the empty string.
role属性を持つimg要素は、空文字列のaltを持ってはいけない、という指摘です。
装飾画像はalt=""だけで足ります。付け足す方が丁寧に見えるのですが、この組み合わせに限っては、書かない方が検査を通ります。
同じロゴでも、書く内容は変わる
ここで、会社のロゴを例に考えてみます。青い三角形のマークが入った、架空の「サンプル工務店」のロゴです。
画像ファイルは同じでも、使う場所によって次のように変わります。
| ロゴの使い方 | altの例 |
|---|---|
| ロゴだけがホームへのリンク | サンプル工務店 ホーム |
| 同じリンク内の文字で行き先が分かる | 空欄 |
| ロゴの形を説明する記事で使う | 青い三角形を組み合わせたロゴ |
架空の「サンプル工務店」のロゴです。同じ画像でも、その場所で伝えたいことが変わります。
画像が表示されている状態
① ロゴだけのリンク
alt="サンプル工務店 ホーム"
形よりも、どこへ移動するかを伝えます。
② 同じリンクに文字あり
alt=""
同じリンク内の文字で分かるので、ロゴの説明は省けます。
③ ロゴの形を紹介
青い三角形を組み合わせたロゴ
alt="青い三角形を組み合わせたロゴ"
形を伝える場面なので、見た目の説明が役立ちます。
切り替え後は、画像の代わりに伝えたい情報を文字で示します。実際のスクリーンリーダーの読み上げを再現したものではありません。見本のリンクは移動しません。
ロゴだけのリンクなら、行き先を伝える
ヘッダーのロゴを押すと、ホームに戻る場合です。
<a href="/">
<img
src="logo.png"
alt="サンプル工務店 ホーム">
</a>この場面で必要なのは、三角形の形よりも「どこへ移動するか」です。
このコードのaltを空にすると、リンクの名前になる文字がなくなってしまいます。
同じリンクに文字があれば、ロゴは空欄にできる
次は、ロゴの横に社名と「ホーム」が書かれている場合です。
<a href="/">
<img src="logo.png" alt="">
サンプル工務店 ホーム
</a>行き先は文字で分かります。ロゴがそれ以上の情報を加えていないなら、同じ内容をもう一度altで伝える必要はありません。
ただし、ここには一つ注意があります。文字が「同じリンクの中」に入っていることです。
画面ではすぐ隣でも、文字がリンクの外にあると、リンク自体には名前が付かない場合があります。「横に社名が見えるから大丈夫」と、見た目だけでは決められないところです。
ロゴの形を紹介するなら、見た目にも意味がある
ロゴのデザインを紹介する記事ではどうでしょうか。
その形が本文では説明されていないなら、「青い三角形を組み合わせたロゴ」というaltが役立ちます。今度は、見た目そのものが伝えたい情報だからです。
同じ画像なのに、先ほどは要らなかった説明が必要になる。altが画像ごとに一つに決まらないのは、こういう理由です。
写真やグラフは、どこまで説明すればいい？
ロゴ以外でも、考え方は同じです。
例えば、修理の記事に載せる写真なら、読者が知りたいのは「部品の写真です」ということより、どこがどう壊れているかかもしれません。
反対に、記事の雰囲気を整えるために添えただけの写真なら、説明を省ける場合があります。
ここで確かめたいのは、その画像がなくなったとき、本文から分からなくなることがあるかです。
「修理しました」と本文に書いてあっても、写真にしか写っていない破損の状態までは伝わりません。同じ話題の文章が近くにあるだけで、altを空にできるとは限らないんですね。
また、グラフの数値を全部altに入れようとすると、とても長くなります。
そんなときは、短いaltで何のグラフかを伝え、詳しい数値は表、傾向は本文で説明する方法があります。例えば「月別売上の推移。数値は直後の表に記載」と案内すれば、詳しい情報がどこにあるかも分かります。W3C：複雑な画像の説明方法
altだけですべてを背負わなくて大丈夫です。ページ全体で、同じ情報を受け取れるようにします。
チェックでエラーが出なくても、言葉は見直したい
「書き方が合っているか、ツールで確認できないの？」と思うかもしれません。
そこで、この記事用に短いHTMLを作り、Nu Html CheckerというHTMLの検査ツールで確認しました。
2026年9月7日、バージョン26.9系では、altのない画像はエラーになりました。一方、次の書き方にはエラーが出ませんでした。
alt="IMG_2024.jpg"alt="画像"- 空のaltの画像だけを入れたリンクやボタン
最後の例には、文字やaria-labelなど、別の方法による名前も付けていません。
ファイル名だけでは画像の情報が伝わらなくても、何をするボタンか分からなくても、このHTMLの検査は通ったわけです。
ただし、機械で見つけられないわけではありません。アクセシビリティ検査ツールのaxeには、リンクやボタンに名前があるかを確認するルールがあります。axeのリンク検査、ボタン検査
ツールで見つけられる不備を確認したうえで、最後に「この言葉で伝わるかな」と読み直す。両方を使うのがよさそうです。
実務で何が求められるかはコーダーが実務で重宝されるスキルはHTML/CSSだけではないにも書いています。
まずは、自分のサイトのロゴを一つ見てみる
全部の画像を一度に確認するのは大変です。まずは、ヘッダーのロゴや検索ボタンなど、画像だけでできているリンク・ボタンを一つ選んでみてください。
見るところは、次の3つです。
- その画像を押すと、どこへ移動するか、何が起きるか。
- それが分かる言葉が、同じリンクやボタンの中にあるか。
- altを空にすると、必要な説明までなくならないか。
そのあとで、本文中の写真や図を見ていけば大丈夫です。判断に迷う画像は、W3Cのalt判断ガイドでも確認できます。
altは、画像にとりあえず説明を付けるための欄ではありません。画像を見ずに使う人にも、情報や操作を伝えるためのものです。
「何が写っているか」で迷ったら、「ここでは何が分かれば助かるか」に目を向けてみてください。書く言葉も、空欄にしてよい理由も、考えやすくなります。
こうした判断は、求人でマークアップエンジニアと呼ばれる仕事の範囲にも入ってきます。呼び方と担当範囲の違いはコーダーとマークアップエンジニアの違い｜仕事内容と求人の見分け方にまとめました。
