alt属性（代替テキスト）完全ガイド：SEOとアクセシビリティに効く書き方と実例

alt属性とは何か

alt属性（代替テキスト）は、HTMLの要素に付与するテキスト属性で、画像の内容または機能を文字情報で表現するためのものです。視覚に頼らないユーザー（スクリーンリーダー利用者）、画像読み込みが失敗したとき、あるいは検索エンジンの画像理解のために利用されます。HTML5では要素にalt属性を付けることが必須（画像が装飾的であれば空文字を明示）とされています。

なぜ重要か（アクセシビリティと実用面）

• アクセシビリティ：WCAG（Web Content Accessibility Guidelines）1.1.1「非テキストコンテンツ」では、非テキスト要素に対して目的を果たすテキスト代替を提供することが求められています。altは視覚障害者がコンテンツを理解するために不可欠です。
• ユーザー体験：画像が読み込めない回線状況や、画像表示を切っている環境でも内容を伝えられます。
• 検索エンジン最適化（SEO）：検索エンジンは画像の意味を解釈する際にaltを参照します。適切な代替テキストは画像検索での露出やコンテンツ理解に寄与しますが、過剰なキーワード詰め込みは逆効果です。

WCAG・仕様上の要点

• WCAG 2.1 の成功基準 1.1.1（非テキストコンテンツ）：すべての非テキストコンテンツに対して「同等の目的を果たす」テキスト代替が必要。
• HTML5仕様：<img>にはalt属性が必要。装飾的な画像で意味を伝える必要がない場合は alt="" と明示することでスクリーンリーダーに読み上げられないようにします。

実践ガイド：altの書き方ルール

• 画像の目的を明確にする：画像が情報を伝えるのか、機能（ボタン等）なのか、装飾なのかをまず判別する。
• 意味のある画像：画像が本文の理解に必要な場合は、その画像が何を示しているかを簡潔に記述します。例：「赤いトマトの写真」よりも文脈に即した「店頭に並ぶ完熟赤トマト」のほうが有用。
• 機能を持つ画像（リンク・ボタンなど）：画像の機能を説明する。例：送信ボタンの画像なら alt="送信" や alt="お問い合わせを送信"。
• 装飾的な画像：情報を提供しない純粋な装飾は alt="" を指定してスクリーンリーダーにスキップさせる。
• 簡潔さを保つ：冗長な説明や「画像の説明：」のような前置きは不要。一般的なガイドラインでは125文字以内が推奨されることが多い（スクリーンリーダーの読み上げの扱いやすさのため）。
• キーワードの扱い：SEO目的でキーワードを詰め込まない。文脈に自然に含める。
• 複雑な図表や地図：短いaltで要点を伝え、詳細な説明は図の直後の本文、<figcaption>、あるいは別ページへのリンク（aria-describedby）で補う。
• 言語指定：altテキストが別言語の場合はimg要素にlang属性を付けることでスクリーンリーダーの発音を正しく導くことができる。

具体例（コード付き）

意味のある画像：

<img src="tomato.jpg" alt="店頭に並ぶ完熟の赤トマト" >

機能的な画像（送信ボタン）：

<a href="/send"><img src="send.png" alt="送信" ></a>

装飾的な画像：

<img src="corner-decor.png" alt="" aria-hidden="true">

複雑なグラフ（簡潔なaltと詳細説明の併用）：

<figure>
  <img src="sales-chart.png" alt="2024年上期の売上は上昇傾向" id="chart1">
  <figcaption id="chart1-desc">第一四半期から第二四半期にかけて、販促キャンペーン後に売上が約20%上昇した。詳細は次節を参照。</figcaption>
</figure>

よくある間違い・注意点

• altを未記入（属性そのものを欠く）：HTML5ではalt属性は必須。省略するとアクセシビリティ上の問題となりうる。
• ファイル名やURLをそのまま書く：例 alt="IMG_1234.jpg" は無意味。代替テキストは人のための説明を。
• 長すぎる説明をaltに書く：複雑な内容をすべてaltで書くのではなく、要旨をaltで伝え、詳細は本文やfigcaption/aria-describedbyで補う。
• title属性に頼る：titleはスクリーンリーダーやモバイルで一貫して読み上げられるとは限らない。重要な代替はaltに入れる。
• キーワード詰め込み（SEOスパム）：検索エンジンはaltを参照するが、過度な最適化や不自然な表現は禁物。

複雑な画像の扱い（グラフ・地図・インフォグラフィック）

データ密度の高い図表や地図は短いaltに要旨を記載し、詳細なテキストの代替は次のいずれかで提供します：

• 図の直後に詳細な説明文を記載する（本文の一部として）。
• <figure> と <figcaption> を使って図を説明する。
• 詳細ページを用意してリンクする、または aria-describedby で詳細説明の要素IDを参照する。

なお、かつて存在した longdesc 属性は現在では非推奨/実務上ほとんど用いられず、代替手段（aria-describedbyや別ページ、figcaption）が推奨されます。

技術的な注意（SVG・背景画像・lazy loadingなど）

• SVG：外部SVGをで読み込む場合は通常のalt属性が有効。インラインSVGの場合は<title>や<desc>要素、またはARIA属性（aria-label/aria-labelledby）で代替を提供する。
• 背景画像（CSS）：CSSの背景画像はスクリーンリーダーからは見えないため、情報伝達目的の画像をCSS背景に使うべきではありません。装飾的であればCSS背景が適切です。
• 遅延読み込み（lazyload）：lazyloadを使ってもalt属性は常に存在させる。JSで画像を差し替える場合は代替テキストも適切に更新する。
• 多解像度（srcset）：srcsetで複数解像度の画像を指定してもaltは1つで十分。altは画像の意味を表すものであり、表示されるバリアントに依存しません。

テストと検証ツール

• WAVE（Web Accessibility Evaluation Tool）
• Axe（Deque Systems）
• Lighthouse（Chrome DevTools組込み）
• スクリーンリーダー実機テスト：NVDA（Windows）、JAWS、VoiceOver（macOS/iOS）

これらのツールでaltの有無、空altかどうか、内容の妥当性を確認しましょう。また実際にスクリーンリーダーでの読み上げを確認することが最も確実です。

まとめ

alt属性は単なるSEO用フィールドでもなく、装飾ではない重要なアクセシビリティ要素です。画像の目的を正しく判別し、意味のある簡潔な代替テキストを付与すること、装飾的なものは空文字で明示すること、複雑な図はaltで要点を示し詳細は別途配置することが実務の基本です。仕様（HTML5）やWCAGの要求を満たすことは、法的リスクの軽減とより多くのユーザーにとって使いやすいウェブを作ることにつながります。

参考文献

• WHATWG HTML Living Standard — <img> element
• W3C — WCAG 2.1: Understanding Success Criterion 1.1.1 Non-text Content
• WebAIM — Alternative Text
• MDN Web Docs — <img>: alt attribute
• Google Developers — Images: best practices for image SEO
• WAI-ARIA 1.1 Specification
• WAVE — Web Accessibility Evaluation Tool
• Lighthouse — Web performance and accessibility audits