2026年にAIで代替テキスト（Alt Text）を書く方法（WCAG準拠の例）
数年前までは、アクセシビリティ監査を行うということは、サイト上のすべての画像についてコンサルタントが手作業で代替テキスト（altテキスト）を書くことを意味していました。画像1枚につき$1〜3かかり、あなたは彼らを2か月雇う必要がありました。作業は退屈でした。出力は良好でした。けれども、そのコストの高さが「訴訟をちらつかされたときに一度だけやって、その後は二度とやらない」ような種類の施策にしてしまっていたのです。
2026年には、同じ監査がかかる時間はほんの一部になります。AIの代替テキスト生成器は、あらゆる画像から数秒でWCAG準拠のaltテキストを書き出します。アクセシビリティコンサルタントは依然として価値がありますが、仕事はもはや「4,000個のaltテキスト文字列を入力すること」ではありません。仕事は「最も重要な100枚の画像について、AIが生成した下書きをレビューして改善し、それ以外は出荷（公開）すること」です。
この記事では実務面を扱います。良いaltテキストがどのようなものか、重要になるルール、AIの代替テキスト生成器が実際にどう動くか、そして12の実例（AIの最初の出力と、アクセシビリティ編集者がどこをどう変更するか）を紹介します。
WCAGが実際に求めるもの
WCAG 2.1 レベルA、成功基準 1.1.1（非テキストコンテンツ）：「ユーザーに提示されるすべての非テキストコンテンツには、同等の目的を果たすテキスト代替が必要である。」
これがルールです。解釈は次のとおりです。
- 意味のある画像には、その画像、または目的を説明するaltテキストが必要です。
-
装飾画像は
alt=""（空のalt）にすべきです。alt属性を省略しないでください。空のaltにするよりも、そちらの方が悪いです。 - 機能的な画像（アイコン、ボタン）には、見た目ではなく機能を説明するaltテキストが必要です。検索アイコンのaltテキストは「拡大鏡」ではなく「検索」です。
- 複雑な画像（グラフ、図解）には、短いaltテキストに加えて、ページ内の別の場所でより長い説明が必要です。
- テキストの画像は一般に避けるべきです。やむを得ない場合は、altテキストにテキストをそのまま（逐語的に）含める必要があります。
WCAG 2.2はさらに細かなニュアンスを追加しましたが、核となる要件は同じです。多くの国のアクセシビリティ関連法（米国のADA、EUのEAA、オンタリオのAODA、オーストラリアのDDA）はWCAGを参照しています。
AIのaltテキストで本当に重要なルール
学術的な話は忘れてください。やるべきことは以下です。
1. 125文字未満にする。 スクリーンリーダーは長いaltテキストを途中で切り捨てます。検索エンジンは、最初の文以降はほとんど無視します。簡潔さが勝ちです。
2. 「image of」や「picture of」で始めない。 スクリーンリーダーはそもそも、そのユーザーが画像を見ていることを伝えます。「image of」を付けると、読者の時間を無駄にする1つの音節が増えます。内容をそのまま説明しましょう。
3. 具体的にする。 「金のチェーンストラップ付きの赤いレザーハンドバッグ」は「ハンドバッグ」より優れています。SEOの観点では、具体性が順位づけに役立ちます。アクセシビリティの観点では、具体性がユーザーに頭の中のイメージを作らせるのに役立ちます。
4. ピリオドで終える。 altテキストは1つの文章として扱いましょう。スクリーンリーダーは句読点を、間（停止）の長さの合図として使います。
5. キーワードを詰め込まない。 「赤いレザーハンドバッグ、デザイナーハンドバッグ、ラグジュアリーハンドバッグ」といった書き方は、Googleにもスクリーンリーダーにもスパムとして読まれます。キーワードを1回入れるだけで十分です。
6. altテキストを画像の目的に合わせる。 画像が「セール」セクションにあるなら、altテキストに「セール中」を書く価値があります。画像が純粋に見た目のためだけなら、何が写っているかを説明してください。
7. 装飾画像にはalt=""を使う。 横線（区切り線）、装飾的なフリル、情報的価値のない美的な写真——これらはすべて空のaltテキストにすべきです。AIジェネレーターは常に文章を生成します。装飾目的だけの画像なら、AIの出力を上書きしてください。
AIの代替テキスト生成器はどのように動くか
最新のAI代替テキスト生成器（たとえばPixelPandaのAI altテキスト生成器）は、視覚と言語のモデルを使います。このモデルは、画像とテキストのペアを数億件規模で学習されます。これにより、どんな画像でも見て、それについての1文を書けるようになります。
裏側では次のように動きます。
- 画像をアップロードし、モデルが理解できるベクター表現に変換します。
- モデルに対し、実質的に次を求めます。「この画像を、スクリーンリーダー向けで125文字未満の1文として説明して。『image of』のような接頭辞は無し。マークダウンも無し。」
- モデルが1文を返します。
- その文を後処理します（長さチェック、句読点、装飾語の除去など）。
- あなたは、
alt属性にそのまま貼り付けできる1つの文字列を得ます。
この一連の処理は、画像あたり4〜8秒かかります。品質は、多くの画像で本番運用できる程度に十分です。特に具体的であったり技術的な画像の場合は、アクセシビリティ編集者が出力を微調整する必要があるかもしれません。
12の実例
以下は、さまざまな画像タイプに対して、良いAI代替テキスト生成器がどう対応するかを示す例です。AIの最初の出力と、アクセシビリティ編集者が変更しそうな内容を併記します。
例1 — 商品写真（赤いレザーハンドバッグ）
元の画像： 金のチェーンストラップが付いた赤いレザーハンドバッグ。白い背景で撮影。
AI出力：「金のチェーンストラップと金属の金具が付いた赤いレザーハンドバッグ。白い背景の上で撮影されている。」
編集者の対応： 良いです。おそらく「金のチェーンストラップが付いた赤いレザーハンドバッグ。白い背景の上で。」のように短くします。（104文字）
例2 — チーム写真
元の画像： 6人の人物がオフィスのホワイトボードの前に立っている。
AI出力：「オフィスのホワイトボードの前で、6人が一緒に立っている。」
編集者の対応： これがチームページの画像なら、文脈を追加します。「Acmeのチーム—ブルックリンのオフィスでホワイトボードの前に立つ6人。」（95文字）
例3 — ストックの風景
元の画像： 夜明けの山頂。ピンクとオレンジの空。
AI出力：「ピンクとオレンジの夜明けの空に向かってシルエットになった山頂。」
編集者の対応： このままで良いです。（66文字）
例4 — レシピ写真
元の画像： 赤いソースとバジルがのったパスタのボウル。
AI出力：「赤いマリナーラソースがかかったスパゲッティのボウル。新鮮なバジルの葉をのせている。」
編集者の対応： これが「Spaghetti Marinara」のレシピページにあるなら、次を追加します。「白いボウルに盛られた出来上がりのスパゲッティマリナーラ。バジルで飾ってある。」（66文字）
例5 — インフォグラフィック
元の画像： 四半期ごとの売上成長を示す棒グラフ。
AI出力：「棒グラフで、Q1からQ4までの四半期の売上数値と、上向きのトレンドを示している。」
編集者の対応： アクセシビリティのためには、これでは足りません—短いalt + より長い説明を<figcaption>または隣接するテキストで用意します。短いalt：「棒グラフ：売上はQ1の120万ドルからQ4の280万ドルへ上昇した。」（66文字）
例6 — アイコン（検索アイコン）
元の画像： 検索ボタンとして使われている拡大鏡アイコン。
AI出力：「拡大鏡のアイコン。」
編集者の対応： これは機能的です。上書き：「検索。」（8文字）
例7 — 装飾的なフリル
元の画像： セクション見出しの上にある装飾的なオーナメントの渦巻き。
AI出力：「装飾用の渦巻きのデザイン。」
編集者の対応： 空に上書き：alt=""。
例8 — ヘッドショット（LinkedIn風）
元の画像： きちんとした服装の、笑顔の女性のプロフェッショナルなヘッドショット。
AI出力：「ネイビーブレザーを着た笑顔の女性。」
返却形式: {"translated": "翻訳されたHTML"}Editor pass: これがジェーン・スミスの「人物について」ページ用の写真なら：「ネイビーのブレザーを着てにっこりしているジェーン・スミス。」（45文字）。
例9 — アプリのスクリーンショット
Original image: 直近の決済が表示されているStripeダッシュボードのスクリーンショット。
AI output: 「支払いダッシュボードのスクリーンショット。最近の取引として$99が表示されている。」
Editor pass: もしこれがチュートリアル内なら：「顧客からの$99の正常な支払いが表示されたStripeダッシュボード。」（66文字）。
例10 — ミーム
Original image: 「I should be coding.」というテキストの入った画像マクロ。
AI output: 「疲れた様子の人物が机に向かっている画像マクロで、キャプションが『I should be coding.』になっている。」
Editor pass: 良い。少し短くしてもいいかも：「ミーム：机のそばで疲れた人、キャプションは『I should be coding.』。」（66文字）。
例11 — ビフォー/アフター写真
Original image: リフォーム後のキッチンのビフォー/アフターを左右に並べた画像。
AI output: 「左右比較：左は古いキッチン、右はリフォームされたモダンなキッチン。」
Editor pass: そのままでOK（98文字）。
例12 — 製品バリアントの色見本
Original image: ボルドー色の布地を示す小さな色見本。
AI output: 「ボルドー色の布地の見本。」
Editor pass: eコマースのバリアントなら：「ボルドー色のバリアント。」（24文字）。
例から分かるパターン
いくつか注目すべき点があります：
- AI出力は一貫して良いが、汎用的。 それは視覚的にそこにあるものを説明しています。文脈は分かりません。つまり、これが特定のSKUの製品写真であること、装飾的ではなく機能的な画像であること、そしてこの人物の名前がジェーン・スミスであることなどは分かりません。
- Editor passは詳細ではなく文脈を追加する。 AIは通常、画像を十分に正確に説明します。人間の仕事は、そのaltテキストがページの目的に役立つようにするための周辺文脈を追加することです。
-
装飾画像と機能画像には人間による上書きが必要。 AIは常にテキストを生成します。装飾用（
alt=""）または機能用（「拡大鏡アイコン」ではなく「検索」）の用途では、必ず上書きしなければなりません。 - 複雑な画像には補足説明が必要。 グラフ、インフォグラフィック、技術図—altテキストだけでは不十分です。AIはaltテキストを提供しますが、近くにより長い説明も必要です。
アクセシビリティ監査のためのワークフロー
既存サイトでアクセシビリティ監査を行う場合：
ステップ1。 サイトをクロールします。SitebulbやScreaming Frogのようなツールは、すべての画像URLとその現在のalt属性をエクスポートします。
ステップ2。 altテキストが空、欠落、または汎用的な画像をフィルタします。これがあなたの改修候補リストです。
ステップ3。 アクセスが多いページの画像は、それらをアクセシビリティ向けに調整されたAI画像説明ツールに通します。すべての画像について、まずはじめのaltテキストを取得します。
ステップ4。 上位50〜100件の画像にEditor passを行います。上記のパターンを適用してください。文脈を追加し、機能画像/装飾画像を上書きし、複雑な画像はより長い説明で補足します。
ステップ5。 CMSのメディア取り込み、またはアセット管理ツール経由で一括更新します。
ステップ6。 axe、WAVE、またはLighthouseで再監査し、カバー率を確認します。
1,000画像のサイトなら、以前は2週間だった作業が2日になります。10,000画像のサイトなら、1週間で、以前の3か月だったものが3か月ではなくなります。ボトルネックはもはや文章を書くことではありません。編集レビューとCMSの更新です。
「汎用的な、ページの画像」altテキストはどうする？
一部のサイトではaltテキストを動的に生成します。たとえば「スミスさんのブログ記事『バードハウスの作り方』の写真。」です。これは技術的にはaltテキストですが、役に立ちません。スクリーンリーダーのユーザーに、画像に実際に何が写っているのかをまったく伝えないからです。
AIで、本当に内容に即したaltテキストを生成してください。汎用のAI Image Describerはあらゆる種類の画像を扱い、1回で「説明者の目線の要約」と「スクリーンリーダー対応のaltテキスト」を返します。純粋なアクセシビリティ作業だけを目的にするなら、accessibility-tuned pageの枠組みのほうが、監査ワークフローにより沿っています。
WCAGは要求しないが、それでもやるべきこと
WCAGが厳密には要求していないものの、アクセシビリティの成果を高める要素がいくつかあります：
- ページ上で表示されるキャプション — これはスクリーンリーダーのユーザーだけでなく、誰にとっても役立ちます。
- title属性 — 多くの場合altテキストと冗長ですが、一部のスクリーンリーダーはそれを読み取ります。
- 複雑なインタラクティブ画像のためのARIAロールとラベル — とくに、ユーザーが操作するグラフの場合。
- 高い色コントラスト — altテキストは画像を説明しますが、視覚的なコントラストは弱視のユーザーが画像を直接見やすくします。
- 音声付きの動画を自動再生しない — スクリーンリーダーのユーザーにとって、突然の音は混乱を招きます。
これらは良い実践です。自動チェックでは検出されにくいものの、障害のあるユーザーにとって体験を大きく改善します。
結論
アクセシビリティの経済性は2026年に変わりました。altテキストはかつて最も見落とされがちなアクセシビリティ機能でした。なぜなら、すべての画像に手作業で書くのは現実的ではなかったからです。AIによるaltテキスト生成は、そのボトルネックを取り除きました。すべての画像に対するWCAG準拠のaltテキストは、サイトの規模に関係なく、今や実現可能です。
もしaltテキストの改修があまりに大規模に見えて、アクセシビリティ監査を先延ばしにしていたのなら、今年こそやるべきです。ツールは十分に良いです。コストも十分に低いです。対応しないことによる法的・評判上のリスクは、かつてないほど高くなっています。
1日を決めましょう。監査を実行します。まずはじめのaltテキストを生成します。上位100件を数時間編集します。公開します。あなたのスクリーンリーダーのユーザー、そしてあなたの非アクセシビリティを理由に訴えようとしている人たちも、きっと感謝します。
