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内の
CSSのbackground-image:背景画像はaltが付けられないため、意味のある情報を含む画像はimg要素で配置すること。純粋に装飾的な背景ならCSSで問題ありません。
alt と title の違い
alt:画像の代替テキスト。アクセシビリティと画像が読み込めない場合の代替表示に用いる。
title:ツールチップ的な補助情報を提供するが、スクリーンリーダーやブラウザでの実装は一貫しておらず、アクセシビリティの代替にはならない。重要な情報はaltまたは本文で提供すること。
WordPressでの取り扱い(実務的注意)
アップロード時のデフォルト:WordPressは画像をアップロードするときに「タイトル」をファイル名から自動設定することが多いですが、Altテキスト(代替テキスト)欄は自動で埋められないため、手動で入力する必要があります(テーマやプラグインで自動生成するものもあります)。
メディアライブラリ:メディア編集画面でaltテキストを記入でき、投稿内の画像にも反映されます。SEOプラグイン(例:Yoast)はaltの有無や最適性をチェックする機能を持つものがありますが、自動で良質なaltを作るわけではありません。
テーマやページビルダー:ビルダーによっては画像挿入時のUIがalt入力を見えにくくしている場合があるため、都度確認して記入する習慣をつけることが重要です。
チェックツールと自動化の注意点
自動チェックツール(アクセシビリティチェッカー、Lighthouse、axeなど)はalt属性の有無を検出しますが、テキストの質(適切さ)までは判断しにくいです。
自動生成されたalt(ファイル名をスペース化しただけ等)は初心者向けの改善ですが、意味ある文章を書いた方がベターです。
サイト全体のaltをチェックするには、CMSのエクスポートやクローラーを用いて漏れや空alt(装飾目的以外の空altは問題)を洗い出すと効率的です。
簡単な実例集
情報を伝える画像:<img src="chart.png" alt="2024年度第1四半期の売上は前年同期比で15%増加。地域別では北部が最も高い">
装飾画像(アイコン・飾り線):<img src="decorative.png" alt="" role="presentation"> または aria-hidden="true"
ロゴ(リンクとして):<a href="/"><img src="logo.png" alt="株式会社サンプル — 公式サイト"></a>
長い説明が必要な図:altは要旨、詳細は<figure><figcaption>または別ページで提供。
まとめ
alt属性は単なるマークアップの一部ではなく、アクセシビリティとユーザー体験、そして検索エンジンによる理解に直結する重要な要素です。実務では「意味のある画像には必ず適切なaltを」「装飾は空のaltで無視させる」「長文が必要なら別の方法で詳細を提供する」という基本ルールを徹底してください。WordPressなどのCMSを使う場合は、アップロード時にaltを必ず設定するワークフローを取り入れることをおすすめします。
参考文献
- W3C — WCAG 2.1: Understanding Success Criterion 1.1.1 Non-text Content
- MDN Web Docs — <img>: alt 属性(日本語)
- WebAIM — Alternative Text
- Google Developers — Image best practices for structured data
- WordPress.org サポート — 画像の使い方(日本語)
- MDN — longdesc(非推奨の属性について)


