alt属性の基礎から実践まで：アクセシビリティとSEOを両立させる完全ガイド

altタグとは — 基本定義と役割

altタグ（正確にはHTMLの要素に付ける「alt属性」）は、画像の代替テキストを指定するための属性です。視覚的に画像を認識できないユーザーや、画像が読み込まれない環境（ネットワーク制限、画像ブロック）に対して、画像が何を表しているかを伝える役割を持ちます。アクセシビリティの観点から必須に近い要素であり、検索エンジンやSNSでの画像理解にも影響します。

技術的な仕組み

HTMLの基本構文は次のようになります：

<img src="path/to/image.jpg" alt="ここに代替テキスト（代替説明）を書く">

ブラウザやスクリーンリーダーは、画像が表示できない・表示しない場合にalt属性の内容をユーザーに提示します。alt属性がない、または空（alt=""）のときはスクリーンリーダーはその画像を無視します（装飾目的の画像に適した扱い）。

アクセシビリティと法的基準（WCAG）

• WCAG（Web Content Accessibility Guidelines）では、非テキストコンテンツに対してテキスト代替を提供することが要求されています（WCAG 2.1 の Success Criterion 1.1.1 Non-text Content）。

• 情報を伝える画像（グラフ、図表、操作の手順、商品写真で重要な特徴を示す画像など）は必ず意味のあるaltを付ける必要があります。

• 装飾目的の画像は空のalt（alt=""）を指定してスクリーンリーダーに読み上げさせないのが推奨です。

SEOへの影響

• 検索エンジンは画像自体を「読む」ことが難しいため、alt属性のテキストは画像内容の理解に使われます。適切なaltは画像検索やページのコンテキスト評価に寄与します。

• ただし、SEO目的でキーワードを詰め込むのは避けるべきです。過剰な最適化はユーザーにも検索エンジンにも不自然に見え、効果が薄いかペナルティの対象になる可能性があります。

• altはページの主文脈に沿った短く明確な説明を付けることが最善です。

実践的な書き方（ベストプラクティス）

• 具体的で簡潔に：画像が伝えたい「情報」を短く伝える。例：<img src="sales-2024.png" alt="2024年度第1四半期の売上は前年同期比15%増"

• 装飾画像は空にする：<img src="decorative-border.png" alt="">。こうすることでスクリーンリーダーは無駄に読み上げません。

• 冗長な前置きを避ける：「画像で示す」等は不要。画像であることを強調する必要はありません（スクリーンリーダーはimg要素だと理解しているため）。

• フォームのアイコンやボタン内の画像：ボタンの機能を示すalt（例：検索ボタンなら alt="検索"）。

• 長い説明が必要な場合はfigcaptionや別ページでの詳細説明、もしくはaria-describedbyで参照する。altには短い要旨を置く。

• 文字が画像に含まれる場合は、そのテキストをaltに含める（例：ロゴに社名が入っている場合は社名をaltに）。ただし、ロゴが装飾目的のみであれば alt="" を検討。

• 文字数目安：厳格な上限はないが、一般的には100〜125文字程度に収めると読みやすく実用的（長文が必要なら別の方法で詳細を提供）。

特殊ケースの扱い

複雑な図表やインフォグラフィック：図の要旨をaltに書き、詳細はキャプション（figcaption）や別ページ（長い説明）で提供。HTMLの longdesc 属性はHTML5で非推奨になりつつあり、代わりにaria-describedbyやリンク先での長文説明が推奨されます。

SVG画像：SVG内の