画像の代替テキスト（alt）の書き方｜装飾画像、図解、UIアイコンの判断例

代替テキスト（altテキスト）は、画像が見えない状況でも、その画像がページ内で伝える情報や機能を理解できるようにする文章です。

画像の見た目を機械的に描写するのではなく、掲載目的、周辺の文章、画像を外したときに失われる内容から書く言葉を決めます。

先に判断の軸を示します。

• 情報を伝える画像には、文脈に必要な内容を簡潔に書く。
• 純粋な装飾や、近くの文章と完全に重複する画像には、空の代替テキストを設定する。
• リンクやボタンに使う画像には、見た目ではなく移動先や操作内容を伝える。
• グラフや図解の詳細は、短い代替テキストだけに詰め込まず本文や表でも提供する。

代替テキストは画像の用途で決まる

altはHTMLのimg要素に設定する属性です。

スクリーンリーダーなどの支援技術は、この値を画像の代わりとなる情報として利用します。

同じ写真でも、採用ページなら「社員が働く様子」、設備案内なら「車いすで利用できる机の配置」のように、ページが伝える内容によって適切な表現は変わります。

判断に迷ったら、画像を非表示にして「読者が理解できなくなる情報や操作は何か」を確認します。

W3Cのaltディシジョンツリーも、画像に文字があるか、操作に使うか、文脈上の意味があるか、装飾かという順序で判断を整理しています。

短くても意味が伝わる書き方

代替テキストを書く前に、画像の種類よりも「この画像がないと何が伝わらないか」を一文で答えます。

その答えから、周辺の見出し、キャプション、本文ですでに伝わっている内容を除くと、重複の少ない代替テキストになります。

写真やイラスト

働き方を紹介する記事に、パソコンを使う人物の写真があるとします。

alt="男性がパソコンで作業している写真"では、見た目は分かっても記事との関係が伝わりません。

その写真がリモートワークの例を示すなら、alt="自宅でリモートワークをする社員"のように、本文が必要とする情報へ絞ります。

ただし、写真かイラストかという表現形式そのものに意味がある場合は、その違いを省きません。

商品画像とプロフィール画像

商品画像では、商品名に加えて、購入判断に関係する色、形、素材など、画像から確認できる特徴を選びます。

例はalt="ベージュのレザー製トートバッグ。A4書類を収納した状態"です。

プロフィール画像では、同じページに氏名と役割が書かれているなら重複を避け、画像が人物識別に必要なときだけalt="広報担当の佐々木さん"のように記します。

装飾画像と情報の重複

背景の模様、区切り線、角の飾りなど、内容の理解に影響しない画像にはalt=""を設定します。

<img src="pattern.png" alt="">

alt属性そのものを省略する方法とは区別が必要です。

空のaltは支援技術に画像を無視させる意図を示しますが、属性を省くとファイル名などが読み上げられる場合があります。

画像内の文言が見出しや直後の文章に同じ内容で示されている場合も、重複して読み上げないよう空のaltを選べます。

ただし、画像内にしかない告知日や条件まで消えるなら装飾ではありません。

W3Cの装飾画像の解説が示すとおり、装飾か情報かは画像ファイルの種類ではなく、そのページに置く理由で判断します。

リンク画像とUIアイコン

操作に使う画像は、画像単体ではなく、リンクやボタン全体のアクセシブルネーム（支援技術が操作要素を識別する名前）を確認します。

画像だけで構成したリンクなら、画像のaltに移動先や機能を設定できます。

<a href="/search/">
  <img src="search.svg" alt="サイト内検索">
</a>

アイコンだけのボタンなら、ボタンにaria-labelを設定し、内側の画像は空のaltにします。

<button type="button" aria-label="検索">
  <img src="search.svg" alt="">
</button>

「検索」のような可視テキストがボタン内にある場合は、そのテキストを名前として利用できるため、同じaria-labelを重ねる必要はありません。

W3Cのアクセシブルネームと説明の実践指針も、適切な可視テキストがあるときは、それを名前に使う方法を優先しています。

グラフと複雑な図解

グラフや工程図は、代替テキストを長文化するだけでは情報を探しにくくなります。

altには図の種類と主題を短く書き、結論に必要な数値、比較関係、例外は、画像の近くに文章やデータ表として示します。

<img src="sales-chart.png" alt="月別売上の推移を示す折れ線グラフ">

色の使い方、要約、データ表、操作まで含めた設計は、アクセシブルなグラフ設計の実務ガイドで詳しく確認できます。

画像内の文字とスクリーンショット

画像内の文字が本文に存在しない場合は、理解に必要な文言を代替テキストか周辺の文章で提供します。

同じ文言が隣接する見出しや本文にすべて書かれている場合は、画像を空のaltにして重複を避けられます。

スクリーンショットでは、メニュー名を端からすべて列挙するよりも、その画像が示す操作や結果を短く書きます。

クリック順、入力内容、エラーへの対処は、順序付きリストとして本文に置くと、画像を見られない読者も同じ手順をたどれます。

SNS画像と広告バナー

SNSの代替テキストも、投稿文との重複を避けながら、画像内にしかない情報を補います。

入力できる文字数はサービスの仕様変更を受けるため、固定の上限を前提にせず、各サービスの投稿画面で確認します。

文字を多く載せた告知画像では、日時、会場、申込条件などを投稿本文にも書くと、検索やコピーもしやすくなります。

広告バナーは「広告画像」とだけ書かず、商品や企画の内容、リンク先でできることが分かる表現にします。

alt、キャプション、本文の役割

四つの役割を一つの長いaltへ詰め込むと、情報の重複と読み上げの負担が増えます。

避けたい代替テキスト

WCAG 2.2との関係

画像の代替手段は、WCAG 2.2の達成基準1.1.1「非テキストコンテンツ」（レベルA）と関係します。

この基準は、非テキストコンテンツに同等の目的を果たすテキスト代替を提供し、純粋な装飾などは支援技術が無視できるようにすることを求めています。

ただし、代替テキストを整えただけで、ページやサイト全体のAA適合を宣言できるわけではありません。

適合性を評価するには、ほかの達成基準も含め、対象範囲と検証方法を定めて確認します。

基準の原文と目的はW3Cの達成基準1.1.1の解説、版の違いや追加基準はWCAG 2.2の変更点を扱う記事で確認できます。

公開前の確認手順

1. 画像を一つずつ、情報、機能、装飾、複雑な図のいずれかに分類する。
2. 情報画像と機能画像に、ページの文脈に合う代替テキストがあるか確認する。
3. 装飾画像と完全に重複する画像にalt=""があるか確認する。
4. リンクやボタンが、画像を見なくても操作内容を識別できるか確認する。
5. 図表、文字入り画像、スクリーンショットの詳しい情報が本文にもあるか確認する。
6. 実際の画面でキーボード操作と読み上げ順を確認する。

公開時に整えても、記事更新や画像差し替えで品質は変わります。

担当者、判断基準、確認時期まで決める方法は、更新担当者が守るWebアクセシビリティの実務ルールで整理しています。

公開前に押さえる要点

• 代替テキストは、画像の見た目だけでなく、そのページでの意味や機能を書く。
• 装飾や重複には空のaltを使い、属性の省略とは区別する。
• 操作要素はリンクやボタン全体の名前を確認する。
• 複雑な図の詳細は本文や表へ移し、画像を見なくても結論を追えるようにする。
• 公開前チェックを更新作業にも組み込み、画像差し替え後も判断をやり直す。