ALTテキスト完全ガイド — アクセシビリティ×SEOの両立

ALTは「画像が伝える意味」を文脈に合わせてテキスト化するミクロコピーです。アクセシビリティの根幹であると同時に、 Helpful Content の観点でも信頼できる説明は評価に直結します。本稿は装飾/リンク/図表/スクショなど“よくある場面”別に実務テンプレを示し、NG例とチェックリストで仕上げます。

先に結論（迷ったら）

装飾は alt=""（空ALT）＋aria-hidden or CSS背景。
リンク画像は「リンク先の目的」をALTに（例：「料金プランへ」）。
図表は結論をALT、詳細は<figcaption>や本文に。
長さの目安は40–120字。冗長語（「画像」「写真」「クリック」）は不要。

要点（TL;DR）

ALTは文脈依存。同じ画像でもページ目的で内容が変わる。
まず役割を分類（装飾／情報／機能）。装飾は alt=""。
固有名詞・数量・状態を優先。冗長語・キーワード詰め込みはNG。
図表は要約をALT、詳細はキャプションや本文で展開。
生成AIは下書きとして使い、必ず人が文脈で修正。

1. 画像の役割を決める（3分類）

装飾：雰囲気・余白目的。→ alt=""（空）、もしくはCSS背景。
情報：内容理解に必要。→ 要点をALTに。図表は結論、UIは操作意味。
機能（リンク/ボタン）：→ ALTはリンク先の目的を表す語に。

2. 書き方ルールとテンプレ

目安は40–120字。ページの目的に照らし“何が分かれば足りるか”を最短で書きます。冗長な「画像」「写真」「クリック」は省略。固有名詞/数量/状態を優先します。

状況	良いALT（例）	悪い例
製品写真	黒の無線マウス。右利き用、USB-C充電。ホイールは金属、重量78g。	画像／マウス
UI手順スクショ	設定→画像→「自動変換を有効化」をオンにする画面。	スクリーンショット
リンク画像	料金プランへ／導入事例一覧へ	ボタン／クリック
装飾	`alt=""`（空ALT）	飾り／背景の点
グラフ	2024年Q4、WebP採用率が72%に上昇（詳細は本文表）。	棒グラフ／グラフ

3. 実装レシピ（コピペOK）

A. 装飾画像（空ALT）

<img src="/img/deco.png" alt="" width="640" height="360" aria-hidden="true" decoding="async" />

B. リンク画像（目的をALTに）

<a href="/pricing">
  <img src="/img/cta-pricing.png" alt="料金プランへ" width="320" height="96" />
</a>

C. 図表（ALT=要約、詳細はcaption）

<figure>
  <img src="/img/chart.avif" alt="2024年Q4、WebP採用率が72%に上昇" width="640" height="360" />
  <figcaption>ソース: 自社調査（n=500）。年度推移は本文表を参照。</figcaption>
</figure>

D. 複雑な図の長い説明（本文と関連付け）

<figure id="f1">
  <img src="/img/flow.png" alt="処理フローの全体図（主要経路はA→B→C）" aria-describedby="f1d" width="640" height="360" />
  <figcaption id="f1d">各工程の詳細は本文の手順1〜3を参照。</figcaption>
</figure>

E. UIスクショ（操作の意味を）

<img src="/img/setting.png" alt="画像→“自動変換を有効化”をオンにする設定画面" width="960" height="640" />

CLSゼロの原則

すべての <img> に width/height または aspect-ratio を指定し、広告にはプレースホルダ高を確保します（詳細：画像と広告のCLSゼロ設計）。

4. よくあるNGと回避策

「画像／写真／クリック」とだけ書く → 文脈情報ゼロ。目的語を入れる。
キーワード詰め込み → 不自然で逆効果。検索意図と可読性を優先。
装飾に説明を書く → スクリーンリーダーがノイズ化。装飾は alt=""。
長い数表をALTに全部入れる → 要約をALT、詳細は本文/表へ。

5. 生成AI時代のALT運用（半自動化）

ファイル名・周辺見出し・キャプションから候補を生成し、人が短く整える。
禁則語：画像/写真/クリック/ボタン等。固有名詞・数量・状態を入れる。
重複ALTは避ける。類似群はカテゴリー語＋差分の型で運用。

6. 公開前チェック（10項目）

各画像の役割（装飾/情報/機能）を判定した。
装飾は alt=""＋必要に応じ aria-hidden。
リンク画像のALTは“リンク先の目的”になっている。
図表は結論をALT、詳細は<figcaption>/本文。
ALTの長さはおおむね40–120字、冗長語なし。
画像オフ時に文脈が崩れない。
スクリーンリーダーの読み上げで違和感がない。
CLSゼロ（寸法明示、広告プレースホルダ）。
類似画像のALTが重複していない。
内部リンク整備（srcsetガイド /OGPテンプレ）。

7. まとめ：ALTは“文脈→要点→最短の言葉”

ALTは万能のSEO魔法ではありませんが、文脈に合った要点を最短の言葉で伝えるほど、アクセシビリティと検索の双方で“伝わる”ページになります。テンプレをチーム運用に落とし込み、仕上げは /compressor と /compare で現物を確認しましょう。