画像のalt属性（代替テキスト）をどうするべきか
はじめに
こんにちは。株式会社VOWZ の Chikara です。
弊社では、定期的なアクセシビリティ講習の実施や、制作したWebページに対するアクセシビリティチェックなど、企業として継続的にアクセシビリティに取り組んでいます。
今回は、画像のalt属性（代替テキスト）に関する解説をお届けします。
altとは
「alternative text」を略して、alt。
Web開発における alt 属性は、画像が表示されない場合や、視覚障害のあるユーザーがスクリーンリーダーを使ってWebページを閲覧する際に、画像の内容をテキストとして伝えるために使用されます。
alt 属性の活用は、ウェブのアクセシビリティを向上させるうえで非常に重要な要素のひとつです。
Webコンテンツのアクセシビリティガイドライン（WCAG）でも、意味のある画像には適切な代替テキストを提供することが推奨されています。
また、検索エンジン最適化（SEO）の観点からも alt 属性は効果的です。検索エンジンは alt テキストを通じて画像の内容を把握し、検索結果の精度向上に活用しています。
altの必要有無
原則として、すべての画像には alt 属性（例：alt=""）を明示的に指定する必要があります。
そのうえで、その画像に意味があるかどうかを判断し、必要に応じて適切な代替テキスト（例：alt="代替テキスト"）を記述します。
意味のある画像には、その内容や意図が伝わるような alt テキストを設定します。
一方で、純粋な装飾目的の画像であれば alt="" とすることで、スクリーンリーダーによる読み上げを防ぎ、不要な情報を省くことができます。
以下に例を示しながら、代替テキストの「必要なケース」と「不要なケース」について解説していきます。
① 必要 - 画像がコンテンツとして使用されている場合
画像がページ内のコンテンツの一部として意味を持つ場合、alt テキストは必ず 必要 です。
たとえ画像の下にキャプションや説明文があって情報が重複するように見えても、alt 属性を省略してはいけません。これは、スクリーンリーダーを使用しているユーザーが画像単体にアクセスしたときにも情報が伝わるようにするためです。
具体的なコード例としては以下の通りです：
<ul>
<li>
<img src="img_01.jpg" alt="サービス紹介のイメージ画像">
<p>サービス紹介</p>
</li>
<li>
<img src="img_02.jpg" alt="製品利用シーンのイメージ画像">
<p>製品利用シーン</p>
</li>
</ul>
このように、画像が「サービス内容」や「製品の用途」「事業領域」などを視覚的に補足する目的で使われている場合、代替テキストの役割は極めて重要です。
たとえ視覚的にはただのイメージ画像に見えても、その画像が「このページが何を伝えようとしているか」を補完する役割を担っているのであれば、それはコンテンツ要素とみなされます。
代替テキストには「画像の見た目」ではなく、「画像が表している意味や意図」を簡潔に記述することが推奨されます。
たとえば「青い背景にスーツ姿の人物が写る画像」ではなく、「ビジネスシーンのサービス提供イメージ画像」といったように、文脈を踏まえた意味的な補足が求められます。
② 不要 - 画像が装飾目的で使用されている場合
CSS にて設置されている装飾画像は alt 属性が使用できないため、ここでは割愛しますが、HTML にて記述され配置されている装飾画像については、alt テキストは不要です（※ただし、alt 属性自体は必要です）。
具体的なコード例は以下の通りです：
<div class="mv-content type-1 products top">
<h1>商品・ソリューション</h1>
<img src="img_01.jpg" alt="">
</div>
装飾目的で使用されている画像は、ページの内容を理解するうえで意味を持たないため、スクリーンリーダーで読み上げる必要がありません。
このような画像には alt 属性を空（alt=""）で設定することで、支援技術に対して「この画像は無視してよい」という意図を伝えることができます。
とくに企業サイトやサービス紹介ページでは、ビジュアルの演出として大きな背景画像やアイコンが使われることが多く見られます。
これらに誤って説明文を付けてしまうと、かえってユーザーの混乱を招く原因になりかねません。
そのため、「意味のある画像」か「単なる装飾か」を開発者自身が適切に判断し、装飾画像には必ず alt="" を明示することが、アクセシビリティ対応の基本となります。
③ 必要 - 画像単体
リンクバナーなど、画像単体で構成されているリンクには、alt テキストの指定が必要です。
alt テキストには、リンク先の h1 タイトルなど、内容が明確に伝わる文言を設定することが推奨されています。
具体的なコード例は以下の通りです：
<a href="">
<img src="img_01.jpg" alt="リンク先のタイトル">
</a>
画像単体でリンクが構成されている場合、その画像がリンクの内容を説明する唯一の手がかりになります。
このようなケースで alt 属性が空、または不適切に設定されていると、スクリーンリーダーの利用者にはリンク先の意図が伝わらず、ページのナビゲーション性が著しく低下してしまいます。
alt テキストには、画像が何を表しているのかではなく、「リンク先で得られる情報」や「リンク先の目的」を簡潔に記述することが望まれます。
たとえば、キャンペーンバナーであれば「夏のキャンペーン特集ページへ」、採用情報であれば「採用情報ページへ」といったように、リンク先の内容を明確に伝える表現が適しています。
また、視覚的にはデザイン要素としてバナーが多用される場面でも、alt 属性を適切に設定することで、情報の均等な提供が実現します。
④ 不要 - 画像およびテキスト（一つのリンク）
カード型やリスト型など、ひとつのリンク要素の中に画像とテキストがセットで内包されている場合、alt テキストは不要です。
具体的なコード例は以下の通りです：
<a href="">
<img src="img_01.jpg" alt="">
<p>リンク先のタイトル</p>
</a>
このような構造では、画像のすぐ隣にリンク先のタイトルや説明テキストが配置されているため、スクリーンリーダーの利用者はテキストだけでリンクの内容を理解することができます。
画像には視覚的な補強という役割しかないため、あえて代替テキストを設定する必要はありません。
むしろ、画像に alt テキストを設定してしまうと、スクリーンリーダーがリンク内容を二重に読み上げてしまう恐れがあります。
たとえば、「img_01.jpg の alt が “サービス紹介”」、「p タグ内も “サービス紹介”」といったように、同じ情報が連続して読み上げられることで、ユーザー体験の妨げになることがあります。
このような理由から、リンク内に明確なテキストが存在する場合は、画像には空の alt 属性（alt=""）を設定し、スクリーンリーダーにスキップさせるのがアクセシビリティ上の正しい対応です。
⑤ 必要 - 画像およびテキスト（複数のリンク）
<a href="1.html">
<img src="img_01.jpg" alt="1はこちら">
</a>
<a href="1.html">
<p>1はこちら</p>
</a>
上記のようなコード例は、本来推奨されているものではなく、原則として画像とテキストはひとつの a 要素に内包されるべきです。
しかし、実装上の都合や、修正が難しい既存コードである場合は、alt テキストが必要になります。
このように、画像とテキストが別々のリンク要素として実装されている場合、スクリーンリーダーはそれぞれの <a> タグを独立したリンクとして認識します。
そのため、画像側のリンクに明確な代替テキストが設定されていないと、視覚情報を得られないユーザーにとってはリンクの意味が不明瞭になってしまいます。
理想的には、画像とテキストをひとつのリンクにまとめることで、冗長な記述や読み上げの重複を避けるべきです。
ただし、やむを得ずこのような構造を使用する場合には、画像側のリンクにも alt 属性でリンクの目的を適切に伝える必要があります。
なお、このような実装はアクセシビリティの観点だけでなく、ユーザビリティや SEO の面からも望ましくありません。可能であれば、構造自体の見直し・改修を検討することが望ましいでしょう。
⑥ 必要 - 画像およびテキスト（一つのリンク - 例外）
<style>
a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<body>
<div>
<img src="img_01.jpg" alt="リンク先のタイトル">
<p>リンク先のタイトル</p>
<a href=""></a>
</div>
</body>
本来、a 要素に内包されていないコンテンツを無理やりひとつのリンクとして機能させている場合、alt テキストは必要になります。
ただし、こうした組み方は本来想定されている構造ではないため、非推奨の実装です。
このような構造は、HTML の文法上の意味的なつながり（セマンティクス）を欠いており、スクリーンリーダーでは一体のリンクとして正しく認識されない可能性があります。
見た目には「画像＋テキスト＝ひとつのリンク」に見えても、支援技術上はそれぞれが独立した要素として扱われるため、alt テキストを省略してしまうと、画像リンクの意味が失われてしまいます。
そのため、このような構造でリンク機能を実現している場合には、少なくとも画像に対して alt 属性でリンクの目的を明示する必要があります。
たとえば「会社概要ページへ」や「導入事例を見る」など、リンク先の内容に基づいた具体的な alt テキストを記述します。
とはいえ、アクセシビリティやメンテナンス性の観点からは、HTML5 の仕様に従い、<a> タグの中に画像やテキストを適切に内包する構造へ見直すことを強く推奨します。
⑦ 不要（注意） - 代替テキストが隣接している場合
<figure>
<img src="img_01.jpg" alt="">
<figcaption>〇〇の写真</figcaption>
</figure>
<figure>
<img src="img_01.jpg" alt="写真">
<figcaption>〇〇</figcaption>
</figure>
写真の下にキャプションなどがある場合、写真の代替テキストは基本的に空（alt=""）で問題ありません。
ただし、キャプションに「写真：〇〇」や「〇〇の写真」といった表現がなく、写真であることが明示されていない場合には、少なくとも画像が写真であるとわかるように、代替テキストには「写真」あるいは「〇〇の写真」と記述するのが適切です。
また、前後の文脈や写真の使用意図をふまえたうえで、可能であれば代替テキストには写真だけが伝えている見た目の説明を記述するなど、キャプションとは異なる文言を設定できないか検討してみることもおすすめします。
まとめ
画像の代替テキストについては、必要かどうかがネット上などでも明示されているケースが多い印象です。
ただし、一部には判断が曖昧なものや、事例自体が少ないケースも存在します。
また、「必要かどうか」は分かっていても、「適切な付け方が分からない」といった課題に直面することもあります。
個人的には、代替テキストには唯一の正解があるわけではないと考えています。
大切なのは、同一の組織・サイト・製作者の中で、どれだけ整合性・統一性が保たれているかではないでしょうか。
たとえば、「〇〇の写真」「××の写真」「△△の写真」といった表現が並ぶ中に、「写真：□□」というテキストが混じっていたとします。
「写真：□□」だけを見れば問題のない代替テキストですが、他と並べたときに表記の揺れがあると、支援技術を利用するユーザーに違和感や混乱を与えてしまう可能性があります。
細かいことと思われるかもしれませんが、そうした些細な気遣いこそが、Webアクセシビリティの観点において重要な要素のひとつであると考えています。
本記事を通じて、画像の代替テキストに関する疑問が少しでも解消されたのであれば幸いです。
また、気になる点やご質問がありましたら、お気軽にコメントいただければと思います。
Discussion