クリエイター2026年10月12日

代替テキストはAIに説明させ、推測はさせない

ページでの画像の役目を人が決めてから、AIに代替テキストの下書きをさせ、公開前に自分で確認する手順です。

入門6分で読めます参考ソース 3件

商品写真の代替テキストは、販売ページ、レビュー、ボタンのどれに置くかで、必要な文がかなり変わる。代替テキストとは、画面読み上げが読む文であり、画像が表示されないときに代わりに出る文でもある。問題は、AIが写真の中の物を見分けられるかどうかではない。その画像が、このページで何の役目を果たしているかを知っているかどうかだ。画像だけを渡して 代替テキストを書いて と頼むと、モデルは流れる一文を返す。余分だったり、足りなかったり、役目を外したりしやすい。

W3Cは、画像の文脈と機能を中心に置いている。情報を伝える画像は、重要な部分を短く書く。装飾の画像は alt="" でよい。ボタンやリンクとして使う画像は、機能を書く。グラフや複雑な図は、ページの別の場所に、完全な同等の内容を置くことが多い。MDNも、代替テキストは意味のある置き換えであり、画像 という語やファイル名の繰り返しではない、と注意している。

この記事は、ブログを書く人、サイトを管理する人、ソーシャルやマーケティングの文章を出す人に向けている。AIで下書きを速くしたい一方で、最終稿の責任は自分で持つ人だ。以下のプロンプトと例は編集部が組み立てた。特定のモデル、コンテンツ管理システム（CMS）、スクリーンリーダーで記録を残して試した手順ではない。

ファイルから始めない。このページでの役目から始める

AIを開く前に、実際のページや投稿の中で画像を見て、次の四つから一つを選ぶ。

周囲の文章がまだ言っていない情報を、画像が持っている。
装飾だけか、すぐ隣にすでに書いてあることの繰り返しだ。
ボタン、アイコン、または動作のあるリンクだ。
グラフ、図、またはデータを多く含む図版だ。

この選択は人がする。AIは コーヒーカップを持つ人 と認識できても、いまの記事で大事なのが 新しいカップ なのか、店の空間 なのか、視線のリズムのための絵なのかは決められない。

装飾の画像に、欄を埋めるためだけに文を作らせない。W3Cは、純粋な装飾画像には空の alt を勧めている。支援技術が読み飛ばせるようにするためだ。複雑なグラフも、すべての数値を長い alt の一文に詰め込まない。完全な情報は、ページ上の同等の内容に置く。

画像と、周囲の文章を一緒に渡す

この画像の代替テキストを書いて より使える頼み方は、次のようなものだ。

ウェブサイトの画像に代替テキストを用意しています。

画像の周囲の文章:
[画像の前後から1〜3文を貼る]

自分が決めた画像の役割:
[情報 / 装飾 / 機能 / 複雑なグラフや図]

作業:
- 情報を伝える画像なら、短い代替テキストを2つ提案する。この文脈で画像が足している内容を優先する。
- 装飾なら、無理に説明せず、空の alt を検討すべきだと明記する。
- 機能を持つ画像なら、アイコンの形ではなく、動作または行き先を書く。
- 複雑な画像なら、目的を述べる短い alt を書き、ページ本文の長い説明や表にすべき情報を列挙する。
- 人名、場所、ブランド、感情、年齢、関係、確実に見えない細部は推測しない。
- 最後に別行で `確信がない点:` と書き、人が確認すべき細部をすべて挙げる。

この頼み方は、AIをアクセシビリティの専門家にはしない。編集者が先に決めた文脈へ、出力を縛るだけだ。

一枚の写真、二つのページ、二つの文

次の例は架空の状況だ。 木のテーブルに置かれた青い水筒の写真があるとする。

商品ページでは、画像の横に 750ml、跳ね蓋と持ち手付き とある。ここでは、形と持ち手の位置を読者に見せる役だ。妥当な代替テキストの一例は、本体に跳ね蓋と持ち手がある、青い750mlの水筒 だ。

同じ写真が、ブログ記事 机をすっきり保つ5つの方法 に出ることもある。そこでは水筒はレイアウトの背景にすぎない。文章が水筒から情報を必要としないなら、詳しい説明より空の alt の方が合うことがある。

残す区別はこれだ。代替テキストはキャプションではなく、すべての画素を描写する課題でもない。 その文脈で画像が持ち込んだ情報や機能の置き換えだ。

画像を外したつもりで読む

AIが文を出したら、続けて この文で大丈夫？ と聞かない。画像がないものとして、周囲の文章と代替テキストを一緒に読む。

画像が伝えるはずの情報や機能を、それでも受け取れるなら、下書きは目的に沿っている。alt の文が、画像の直前の段落をほぼそのまま繰り返すなら、雑音を足している可能性がある。確認できない人名、場所、感情、目的が入っていたら、その推測は消す。

画像がリンクやボタンなら、alt を操作の名前として読む。虫眼鏡 より 検索 の方が役に立つことが多い。右向き矢印 より 次の商品を見る の方が役に立つ。W3Cはこれを機能画像と呼ぶ。置き換えが伝えるのは見た目ではなく機能だ。

書きすぎた下書きを短くする

よくある失敗は、モデルが「よく見た」ことを示そうとすることだ。色、光、構図、気分、物の位置まで入ってくる。戻る問いは一つだ。読者が画像を見られなかったら、どの情報が消えるか。

短い指示で削れる。

与えた文脈で、この画像の役割を置き換えるのに必要な部分だけを代替テキストに残す。
装飾的な細部、周囲の文章にすでにある細部、確認されていない推測は消す。
実際に装飾なら、代替テキストを無理に作らず、その旨を書く。

グラフ、手順の図、インフォグラフィックなら、データが消えるまで削り続けない。重要なデータは記事の本文か表に移す。短い alt は、その図が何かと、完全な同等の内容をどこで読むかを伝えればよい。

公開前に、ページの中で読む

公開する前に、見出し、画像の前の段、後の段と一緒に代替テキストを読む。役目を正しく言っているか、無駄な繰り返しがないか、推測が入っていないか、複雑なデータを一文に詰め込んでいないか。CMSにアクセシビリティのプレビューがある、またはスクリーンリーダーがあるなら、実際のページで聞いてみる。支援技術がページをどう読むかは、HTMLとそのページの実際の構造による。alt の一文が単独で正しいこととは別だ。

ここでAIが役立つのは、下書きを作り、人が確認すべき細部を早く浮かび上がらせるときだ。画像に alt が要るか、空の alt が要るか、機能の説明が要るか、より長い同等の内容が要るかは、公開するページの文脈で決まる。