画像のalt属性とは？代替テキストの書き方と空欄にする画像の判断

画像のalt属性は、画像が伝える内容や役割をテキストで説明するために使います。写真の周りに見えるキャプションとは別です。このページでは文章の付け方と確認方法を扱い、画像そのものを掲載してよいかは著作権の記事で確認できるようにしています。

ホームページの画像・写真の著作権｜引用とフリー素材の利用条件

alt属性（代替テキスト）とは？何のために書く？

alt 属性は、HTML の img 要素に付ける属性で、画像の代わりになる文字を書きます。

<img src="gaikan.jpg" alt="○○サービスの事務所の外観。青い看板と2台分の駐車場">

デジタル庁の「ウェブアクセシビリティ導入ガイドブック」は、代替テキストを、写真やイラスト、グラフなど画像で提供される情報と「同等の役割を果たすテキスト」と説明し、画像の代わりにその文字を置いてみても違和感がない内容が望ましいとしています（出典：デジタル庁『ウェブアクセシビリティ導入ガイドブック』2025年）。日本産業規格 JIS X 8341-3:2016 と同じ内容の WCAG 2.0 では、達成基準1.1.1「非テキストコンテンツ」（レベルA）として、利用者に提示されるすべての非テキストコンテンツに、同等の目的を果たすテキストによる代替を求めています（出典：ウェブアクセシビリティ基盤委員会『WCAG 2.0 日本語訳』）。

alt を使うのは、主に次の人と仕組みです。

出典：Google 検索セントラル『Google 画像検索 SEO ベスト プラクティス』（2026年3月更新）、デジタル庁『ウェブアクセシビリティ導入ガイドブック』（2025年10月）

Google は、代替テキストを画像のメタデータを提供するうえで「最も重要な属性」とし、代替テキストに加えてコンピュータ ビジョンのアルゴリズムやページのコンテンツも使って画像のテーマを理解すると説明しています（出典：Google 検索セントラル『Google 画像検索 SEO ベスト プラクティス』2026年）。

法律との関係では、総務省の「みんなの公共サイト運用ガイドライン（2024年版）」が、2021年（令和3年）6月4日に公布された改正障害者差別解消法により事業者にも「合理的配慮の提供」が義務付けられ、2024年（令和6年）4月1日に施行されたと説明しています。デジタル庁のガイドブックは、ウェブアクセシビリティへの取り組みは合理的配慮を提供するための環境の整備として努力義務が課せられているとしています。法律の詳しい内容はホームページのアクセシビリティで扱っています。個別の判断は専門家に確認してください。

altが空のサイトはどれくらい？863件の調査

暖簾AIの調査（2026年10月、中小事業者のサイト863件）で、トップページの img 要素の alt を1枚ずつ確かめ、サイトごとに分けると次のとおりでした。

• 画像が1枚以上あり、すべてに alt がある：158件（18.3%）
• alt が無いか空の画像が半分未満：326件（37.8%）
• alt が無いか空の画像が半分以上（すべてではない）：270件（31.3%）
• すべての画像で alt が無いか空：72件（8.3%）
• トップページに img 要素が無い：37件（4.3%）

画像の枚数で数えると、863件のトップページにあった37,339枚のうち、14,437枚（38.7%）で alt が無いか空でした。トップページの画像の枚数の中央値は27枚です。

作成ツール別に「画像の半分以上で alt が無いか空」の割合を見ると、次のとおりでした。Wix・Jimdo は件数が少ないため、傾向を見る程度にとどめてください。

出典：暖簾AI調べ（2026年10月、中小事業者のサイト863件のトップページ。作成ツールは generator の表示と WordPress 特有のファイルの有無から判定し、Studio の6件は表から除いた）

調査の対象は、全国の遺品整理・生前整理・片付けなどを手がける事業者団体の公開名簿に載る1,069社の公式サイトです。重複を除いた1,061件のうち、2026年10月15日にトップページを取得できた863件を集計しました。1つの業種の事業者団体の名簿から抽出したため、全業種の平均とは異なる可能性があります。判定はトップページのみ・機械的なもので、下層ページの設定は含みません。

注意点として、この調査では「alt 属性が無い」と「alt=""（空）」を区別していません。飾りの画像に alt="" を書くのは正しい書き方なので、空の alt のすべてが誤りというわけではありません。それでも、トップページの4割近くのサイトで画像の半分以上が空ということは、写真やボタンの画像にも alt が無いものが含まれていると考えられます。自分のサイトで、どの画像が空なのかを次の章の考え方で見直してください。

altには何を書く？画像の種類別の書き方

デジタル庁のガイドブックは、代替テキストの付け方を次のように示しています（出典：デジタル庁『ウェブアクセシビリティ導入ガイドブック』2025年）。

• 画像がリンクの場合は、リンク先を示す内容にする
• グラフや図表など意味を示す画像は、その要約を書く。ただし、すぐ近くの文に内容（の要約）があり、何のグラフ・図表かが示されていれば alt="" でもかまわない
• ロゴマークや見出しなど文字を画像にしたものは、同じ文字を書く
• 装飾や意味を持たない画像は alt="" にする
• 長さは仕様や規格では制限が無いが、読み上げソフトでの聞きやすさを考えて80字を目安にする。迷うときは W3C の「alt ディシジョンツリー」を参考にする

小さな会社のサイトにある画像に当てはめると、次のようになります。

デジタル庁『ウェブアクセシビリティ導入ガイドブック』の考え方を、暖簾AIが小さな会社のサイトの画像に当てはめたもの。○○や電話番号は例です

Google も、代替テキストは適切にキーワードを使い、ページの内容に沿った情報に富む役に立つものにするよう求め、次の例を示しています（出典：Google 検索セントラル『Google 画像検索 SEO ベスト プラクティス』2026年）。

出典：Google 検索セントラル『Google 画像検索 SEO ベスト プラクティス』（2026年3月更新）

やってはいけないaltの書き方は？

次の書き方は、読み上げで聞く人にも検索エンジンにも内容が伝わりません。

• キーワードを並べる：「遺品整理 生前整理 片付け 格安 ○○市 ○○町」のような羅列です。Google は alt にキーワードを羅列すると、使い勝手が下がるだけでなく、サイトがスパムとみなされる要因になる場合があるとしています。
• 「画像」「写真」「IMG_0023」だけ：画像であることしか分かりません。画像の代わりに置いて意味が通る文にします。
• 全部の画像に店名だけ：どの画像を読み上げても同じ言葉になり、違いが分かりません。
• 飾りの画像に長い説明：区切り線や背景に説明を書くと、読み上げで本文の邪魔になります。飾りは alt="" にします。
• 文字がたくさん入った画像を alt なしで使う：料金表やキャンペーンの告知を画像だけで載せると、読み上げでは何も伝わりません。デジタル庁のガイドブックは、図に大量の文字が含まれている場合は本文に書き起こすなど、図自体を変えられないか検討するよう求めています。

画像のファイル名も、Google が画像の内容を判断する材料にする場合があります。Google は IMG00023.JPG より my-new-black-kitten.jpg のような簡潔で分かりやすいファイル名を勧め、image1.jpg・pic.gif・1.jpg のような一般的な名前は避けるよう書いています（出典：Google 検索セントラル『Google 画像検索 SEO ベスト プラクティス』2026年）。新しく画像を載せるときは、「gaikan.jpg」「washitsu-before.jpg」のように中身が分かる名前にしてからアップロードします。

画像をリンクやボタンにしている場合、Google はその alt をリンクの文字として使います。リンクの文字の考え方は内部リンクとは？ページ同士のつなぎ方で扱っています。

「alt属性が指定されていません」と出たら？altの確かめ方と直し方

PageSpeed Insights や Chrome の Lighthouse で「ユーザー補助」の項目を調べると、alt 属性そのものが付いていない img 要素があるときに「画像要素に [alt] 属性が指定されていません」と表示されます。これは Lighthouse の image-alt という確認項目の結果です。飾りの画像に付けた alt=""（空）は、この項目では問題として扱われません。alt 属性が無い画像は、読み上げソフトがファイル名を読み上げてしまうことがあるため、表示が出たら次の手順で1枚ずつ alt を書きます（出典：Lighthouse の日本語の表示文、Deque University『image-alt』）。

確かめ方と直し方の手順です。

1. パソコンのブラウザでページを開き、ページのソースを表示します（Chrome なら Windows は Ctrl＋U、Mac は Option＋Command＋U）。
2. Ctrl＋F（Mac は Command＋F）で <img を探し、1つずつ alt="…" の中身を見ます。alt が無い、または写真やボタンなのに空のものを書き出します。
3. WordPress では、画像ブロックを選んで右側の設定にある「代替テキスト」の欄か、メディアライブラリで画像を開いたときの「代替テキスト」の欄に書きます。作成ツールでも、画像の設定の中に代替テキストの欄があるか確かめます。
4. 書いたら、もう一度ソースで alt が入ったかを確かめます。

自動のチェックツールだけに頼らないことも大切です。総務省のガイドラインは、チェックツールは画像の代替テキストの有無を認識できるが、その内容が画像の情報を適切に説明しているかは判定できないため、目視での確認が必要だとしています（出典：総務省『みんなの公共サイト運用ガイドライン（2024年版）』）。店や商品を一番よく知っている人が、写真を見ながら書くのが確実です。

アクセシビリティの取り組みは、公的機関でもまだ途中です。総務省の調査（2025年度、回答1,058団体）では、公式ホームページで JIS X 8341-3:2016 に基づく試験を実施している団体は56.8%で、増え続けています。取り組んでいない団体が挙げた理由は「人員や予算が限られており、十分な投資ができない」65.6%、「アクセシビリティに関する専門知識や経験を持つ人員がいない」59.4%でした（出典：総務省『公的機関のウェブアクセシビリティ対応の促進に関する調査研究報告書 概要版』2026年）。

alt は、専門の道具や予算が無くても、画像1枚ごとに直せる項目です。デジタル庁のガイドブックは、X（旧Twitter）・Facebook・Instagram などの SNS でも画像に代替テキストを付けられると紹介しています。ホームページと同じ考え方で、SNS に載せる写真にも説明を付けておくと、どちらでも同じ内容が伝わります。

まず何から直す？優先する画像の順番は？

画像が多いサイトでは、全部を一度に直すのは大変です。伝わらないと困る画像から順に直します。

1. リンクやボタンになっている画像：電話・問い合わせ・メニューのボタンが画像だけだと、読み上げでは押した先が分かりません。リンク先を示す alt を書きます。
2. 文字が入った画像：料金表・営業時間・対応地域・キャンペーンなど。まず本文に文字で書き、画像は飾りとして alt="" にするか、同じ文字を alt に書きます。
3. トップページの大きな写真とロゴ：ロゴは店名を、写真は何が写っているかを書きます。
4. サービスのページの写真：作業の前後、スタッフ、使う道具など、内容が分かる写真から書きます。
5. 飾りの画像：区切り線や背景の模様は alt="" にそろえます。

見出しを画像にしている場合は、見出しの文字と同じ alt を書きます。見出しそのものの付け方はh1・h2・h3の違いと使い方｜見出しタグの構成例と確認方法で扱っています。

トップページの状態を手早く確かめたいときは、暖簾AIの無料診断で URL を入れると、画像の説明文（alt）を含めて、タイトル・説明文・見出しなどを項目ごとに確かめられます。運用アプリのサイトの診断と点数では、サイト全体を見て回り、ページごとに説明文の無い画像の枚数も示します。