alt属性とは？書き方とSEO・アクセシビリティへの効果

画像を使うBtoBサイトでは、製品画面、料金表、比較図、資料請求ボタンなどが、情報提供や操作の一部を担います。alt属性は、それらの画像をただ説明するための項目ではなく、画像がページ内で持つ意味や機能をテキストで伝えるためのものです。

この記事では、alt属性の基本、SEOとの関係、画像別の書き方、空のalt属性の判断、公開前の検収方法を解説します。読後には、画像ごとに「altを書く・空にする・本文などで補う・実装別に確認する」を判断できるようになります。

alt属性は入力欄を埋める作業ではなく、画像の役割を判断し、必要な代替手段を公開環境で確認する品質管理の一部です。

01Sectionalt属性とは：img要素で画像の意味・機能を伝えるテキスト

alt属性は、主にHTMLのimg要素に設定する代替テキストです。画像を見られない、読み込めない場合にも、利用者がページを理解したり操作したりできるよう、画像が担う情報または機能を伝えます。

重要なのは、画像に何が写っているかを機械的に列挙することではありません。同じロゴ画像でも、企業名を示すために置かれているのか、トップページへ移動するリンクなのかで、伝えるべき内容は変わります。W3C WAIのImages Tutorialでも、画像の目的とページ内の文脈に応じてテキスト代替を決める考え方が示されています。

ファイル名やキャプションとは役割が異なる

ファイル名、キャプション、周辺本文、title属性は画像に関係する情報ですが、alt属性の代わりにはなりません。画像内にしかない判断材料や操作目的を、ファイル名や画面上の補足だけに任せないことが重要です。

たとえば、ファイル名がservice-dashboard.pngであっても、製品の管理画面が何を示し、読者が何を理解すべきかは伝わりません。キャプションに「管理画面イメージ」と書かれていても、その画面で確認できる項目が記事の理解に必要なら、alt属性や周辺本文で補う必要があります。

02Sectionalt属性とSEO：画像理解を助けるが、順位上昇を保証しない

Googleは、altテキスト、ページ内容、画像の近くにある関連テキスト、ファイル名などを、画像の主題を理解する手掛かりとして扱うと案内しています。画像検索も含めた検索上の見つけやすさを考える際、画像の役割に合ったalt属性を整えることには意味があります。詳しくはGoogle Search Centralの画像SEOベストプラクティスを確認してください。

ただし、alt属性を追加・修正しただけで、通常のWeb検索順位や流入が上がるとはいえません。ページ内容、検索ニーズ、競合状況、ほかの更新、検索結果での表示形式など、検索成果には複数の要因が関わります。キーワードを不自然に繰り返すのではなく、画像の目的を伝えるために必要な語だけを自然に使います。

SEO施策全体では、alt属性だけを個別に最適化するのではなく、コンテンツ、技術要件、導線設計などとの優先順位を整理する必要があります。施策全体の考え方はSEO支援の種類と選び方も参考にしてください。

実装品質の完了と検索観測は分ける

alt属性の改善後は、2つの評価を分けます。

• 実装品質の完了判定：公開HTML上で、意味や機能を持つ画像に適切な代替があり、図表や重要導線に必要な情報・操作が残っているかを確認します。
• 検索面の観測：Search Consoleで検索タイプを「Image」に切り替え、対象URL群、修正日、同時期の更新を記録したうえで、表示回数やクリック数を参考値として確認します。Search Consoleのパフォーマンスレポートの案内を参照してください。

検索データの変化をalt属性の修正だけによる結果と決めつけず、品質の合否は公開環境での利用可能性を基準に判断します。

03Sectionalt属性の書き方：画像の目的と文脈から決める

alt属性は画像単体ではなく、周辺の本文やリンクテキストを含めた文脈から決めます。複雑な情報は画像外でも補います。

alt属性に一律の文字数上限や、必ずキーワードを入れるルールはありません。基準にすべきなのは、画像を見ない利用者にとって、何が失われるかです。周辺本文に同じ内容が十分にあれば簡潔にでき、画像にしかない情報なら必要な要点を伝えます。

情報画像・機能画像・複雑な図表の書き分け

情報画像では、本文理解に必要な対象と状態を伝えます。たとえば、導入事例の写真が「現場担当者がタブレットで在庫状況を確認している」ことを示すなら、その状況を簡潔に表します。「写真」「イメージ画像」のような語だけでは、読者が得るべき情報が不足します。

機能画像では、見た目ではなく結果を表現します。虫眼鏡アイコンなら「虫眼鏡のアイコン」ではなく「サイト内を検索」、資料請求用の画像リンクなら「資料請求フォームへ」のように、押した先・実行後の操作が分かる名称にします。機能画像の考え方はW3C WAIのFunctional Imagesでも確認できます。

複雑な図表では、alt属性だけで数値、比較軸、行列構造、適用条件、注記まで伝えるのは難しい場合があります。たとえば料金図版なら、altには「利用規模と支援範囲により費用条件が変わる料金体系」といった要点を置き、具体的な条件は本文やHTML表で示します。グラフ、比較表、導入フローも同様です。W3C WAIのComplex Imagesが示すように、詳細な等価情報は画像外にも用意します。

04Sectionalt=""にする画像と、空にしてはいけない画像

空のalt属性は装飾画像に意図して使うものです。情報・操作・複雑な条件が残る画像は、役割に応じて代替を用意します。

すべてのimg要素に説明文を入れる必要はありません。情報も機能も持たず、削除しても理解・判断・操作に影響しない装飾画像は、意図してalt=""にする候補です。一方、意味を持つ画像でalt属性を省略することと、装飾として空のalt属性を設定することは別です。

次の流れで、画像ごとに判断します。

alt=""と属性の省略を混同しない

装飾用のimg要素は、空のalt属性によって、画像を代替情報として扱わない意図を示せます。W3C WAIの装飾画像ガイドでは、装飾画像に空のalt属性を使う方法を案内しています。

対して、意味や機能を持つ画像のalt属性を省略してよいわけではありません。属性がない場合の扱いは利用環境によって異なるため、特定の読み上げ方を前提にせず、意味を持つ画像には必要な代替を提供する方針で確認します。

ロゴは組織名やサービス名を示す情報になり得ます。トップページへのリンクになっているロゴなら、組織名だけでなく遷移先の目的が分かる名称を検討します。テキストリンクに添えられた矢印アイコンのように、隣接テキストで遷移先が十分に分かる装飾的なアイコンは、重複して伝えない扱いにできる場合があります。

img以外の画像表現は確認対象を変える

画像表現は実装方式によって確認方法が異なります。alt属性の有無だけでなく、情報や操作の代替手段を確認します。

img参照SVGとインラインSVGでは確認対象が異なります。SVGや画像型ボタンを含む実装上の注意は、W3C WAIの画像実装に関するヒントおよびWHATWG HTML Standardのinput要素を確認し、採用しているコンポーネントの仕様に沿って公開環境で検証します。

05Sectionalt属性はアクセシビリティの一部：重要情報を画像だけに残さない

alt属性は、画像を利用しにくい人も情報や機能を利用できるようにする、アクセシビリティの一要素です。WCAG 2.2では、非テキストコンテンツに同等の目的を果たすテキスト代替を用意する考え方が示されています。WCAG 2.2の非テキストコンテンツを参照してください。

ただし、alt属性があるだけで、ページ全体の情報提供が十分になるわけではありません。特に次のような情報は、画像の短い代替テキストだけでは不足しやすい領域です。

• 料金・価格条件：金額、適用範囲、契約条件、更新日、例外
• 比較情報：比較軸、行と列の関係、対象ごとの差異、前提条件
• 導入フロー：工程順、担当、分岐条件、完了条件
• グラフ：単位、期間、母数、重要な数値、出典
• CTA・フォーム：遷移先、操作結果、入力項目、フォームラベル

これらは、本文、HTML表、見出し、分かりやすいリンクテキスト、フォームラベルを組み合わせて提供します。画像を非表示にしても、比較や問い合わせに必要な情報が追えるかを確認することが実務上の基準になります。

組織的な取り組みや発注・受託時の共通理解には、デジタル庁のウェブアクセシビリティ導入ガイドブックが参考になります。また、合理的配慮に関する制度は内閣府の案内で確認できます。個別サイトで必要となる対応は、提供内容、利用場面、代替手段、業種別指針、契約・調達要件によって変わるため、画像のalt属性だけから一律の結論を出すことはできません。

06Section公開前・納品時の確認方法：設定有無と内容品質を分ける

alt属性の検収では、「入力欄に文字があるか」だけでは不十分です。対象範囲を決め、形式上の漏れと内容の妥当性を分けて確認します。

主要URL、資料請求や問い合わせなどのCV導線、ヘッダー・フッター・CTA・カードなどの共通部品、記事内画像を、URLまたは画面種別ごとに洗い出します。複数ページを扱う場合は、評価範囲や代表ページを先に定めます。W3C WAIのWCAG-EMも参考にしてください。

自動検査は、img要素のalt属性が欠けている箇所など、形式上の問題を洗い出す補助になります。一方、空のaltが装飾画像として妥当か、ボタン名が操作結果を伝えるか、比較図の詳細が本文にもあるかは、ページの文脈で確認します。

CMSの編集画面でalt入力値を確認しても、公開HTMLで同じ値が出力されるとは限りません。未入力、空文字、自動設定された値の反映を、ステージングまたは公開ページで確認し、重要な導線では名称・役割と実際の操作目的も確かめます。

07Section既存サイトを改善する優先順位と進め方

既存記事やページが多い場合、全画像を同じ優先度で修正する必要はありません。まず、画像が原因で情報が欠ける、または操作できない箇所を優先します。そのうえで、事業上の重要度、共通部品としての横展開範囲、修正の実現性を加味します。

同程度の利用者影響なら、ヘッダー、フッター、フォーム、CTA、カードのように、修正が複数ページへ反映される共通部品を優先すると改善を広げやすくなります。ただし、共通部品の変更は影響範囲も広いため、公開環境での確認範囲をあらかじめ定めます。

台帳では、alt文字列だけでなく、対象URL・画面種別、実装種別、画像の役割、画像外の補足要否、修正案、優先度、公開後の確認結果を記録すると、修正漏れと判断のばらつきを抑えやすくなります。

alt属性を含むSEO改善の優先順位を整理したい方へ

画像の代替情報、コンテンツ、技術要件、導線設計をどこから見直すかは、サイト構成や運用体制によって変わります。SEO対策の支援先を比較し、依頼範囲を検討できます。

SEO対策3980社掲載

SEO対策の相談先を探す