alt属性とは？画像の役割別に代替テキストを書く方法

alt属性は、画像が伝える情報や操作の目的をテキストで表すための手掛かりです。情報画像や装飾、リンクやボタンでは、必要となる内容を分けましょう。画像の役割と周囲の文脈から考え、公開前に確認する手順を紹介します。画像の意味も丁寧に確かめたい。

画像を見られない人にも必要な情報や操作の目的が伝わるように、ページの中でその画像が果たす役割から考えます。「写真に写るものを全部書く」と考えると、かえって迷ってしまいますよね。

筆者が先に決めたいのは、この画像で読者に何を伝えるか。見た目を一律に説明する前に、役割を一つずつ確認しましょう。

この記事には、運営会社CommunityCreateのサービス案内が含まれます。

• 画像の用途と周囲の文脈から内容を決める
• 装飾画像の空altと属性の欠落を区別する
• 画像リンクは見た目より操作の目的を伝える

公開日：2026年11月4日 / 最終更新日：2026年11月4日

altは画像の役割と文脈から決める

alt属性は画像の代替となるテキストを指定するために使います。情報を伝えるためか、装飾か、それとも操作のためか。記入内容を決める出発点は、画像を置いた目的です。

同じ画像でも文章は変わる

2026年11月時点で確認したW3C WAIの画像チュートリアルは、代替テキストの内容を画像の用途・文脈・内容に応じて判断するよう説明しています。

同じ建物の写真でも、店舗の外観を紹介するページと、建物の色を比較するページでは、伝えたい点が違う。前者なら店を見つける手掛かり、後者なら比較する色に目を向けたいところです。

「何が写っているか」だけでなく、その場所で何を伝えるかを考えましょう。すでに直前の本文で十分に説明している場合は、重複の有無も確かめます。

ファイル名と代替テキストを分ける

画像ファイルの名前は、管理や識別のためのもの。alt属性には、そのページで画像が果たす役割に応じた内容を指定します。ファイル名に単語を並べただけで、画像の目的が読者に伝わるとは限りません。

Googleの画像に関するベストプラクティスは、altにキーワードを詰め込まず、文脈に合った有用な内容を記述するよう案内しています。検索語を増やすことより、必要な情報を伝えることを優先してください。

画像だけでは説明しきれない情報もある

複雑なグラフや図表は、短い代替テキストだけでは細かな数値や関係を伝えきれない場合があります。画像の要点を簡潔に示し、詳しい説明やデータを本文・表などでも読めるようにしましょう。

読者はその図から何を判断するのでしょうか。必要な情報が多ければ、本文の説明も長くなる。重要な結論と根拠が画像だけに閉じていないか、公開前に見直してください。

情報・装飾・リンク画像ごとの記入例

画像の役割を三つに分けると、代替テキストを考えやすくなります。ただし、分類の名前だけでは決められません。周囲の文章やリンクの有無まで合わせて判断しましょう。

情報画像は伝えたい要点を書く

W3C WAIの情報画像の案内は、画像が文脈の中で伝える本質的な情報を短い代替テキストで表すよう説明しています。例えば、会場入口の写真なら「建物右側の青い入口」のように、読者が必要とする場所を示してみましょう。

細部を全部書けば伝わる、というものでもない。その場面で必要な要点を選び、周囲の文章と合わせて読んだときに伝わるかを確認してください。

装飾画像は空のaltを検討する

本文に新しい情報を加えない装飾画像について、W3C WAIの装飾画像の案内は空の代替テキスト `alt=””` を使うと説明しています。

対象になるのは、区切り線の図柄や、隣の本文と同じ情報だけを繰り返す画像など。見た目が華やかでも、新しい情報を加えていない場合があります。

空のaltと、属性の書き忘れは別の話。空である理由を確認してから指定しましょう。装飾に見えても、内容を理解するために必要な情報を含む場合は扱いが変わります。

リンクやボタンは動作の目的を伝える

W3C WAIの機能画像の案内は、操作に使う画像の代替テキストで見た目ではなく機能を伝えるよう説明しています。虫眼鏡の画像だけを使った検索ボタンなら、「虫眼鏡」より「検索」が目的を表す例です。

リンク内に画像と文字が両方ある場合、画像だけを切り離さず、リンク全体でどの名前が伝わるかを見ます。操作すると何が起きるかを確認して、重複や説明不足を調整しましょう。

場面	判断の出発点	記述の例
入口の場所を示す写真	読者に必要な位置情報	建物右側の青い入口
情報を追加しない飾り	周囲の内容を読めば意味が伝わるか	空のalt
画像だけの検索ボタン	操作の目的	検索
複雑な図表	結論と詳細をどこで伝えるか	要点を示し、本文にも詳細を記載

「検索」と書く例も、画像だけの検索ボタンという条件付きです。

例文をそのまま貼る前に、実際の画像と周辺テキストを見て、必要な情報を選び直しましょう。

公開前にHTMLと読み上げの目的を点検する

公開前には画像の役割を確認し、HTMLにalt属性があるか、空の場合は意図したものかを調べます。機械が属性を見つけた後にも、意味を読む人の判断が残る。

架空の4例で欠落と空を分ける

次は点検方法を考える架空のHTML例です。実際のページを測定した結果ではありません。

架空の例	点検したいこと	次の確認
情報画像に文章のalt	属性と値がある	文脈に合う内容か
装飾画像に空のalt	属性があり値が空	本当に装飾か
alt属性のない画像	属性が欠落	役割を調べて適切に指定
画像だけのリンク	属性の有無と値	遷移先や操作目的が伝わるか

筆者の検証（2026年11月）｜架空HTMLのalt属性を点検（Python HTMLParser／架空例）
PythonのHTMLParserで架空の画像要素4件を読み取り、alt属性あり3件、そのうち空文字1件、属性の欠落1件を区別できました。文章の意味やアクセシビリティへの適合は判定していません。

検査で属性が見つかっても、内容が目的に合っているとは限りません。点検は構文と意味の二段階。

編集者と実装担当者で確認する

編集者は画像が伝える内容と本文の関係を確認し、実装担当者は公開されたHTMLで意図した属性が出力されるかを調べます。画像だけのリンクやボタンでは、周辺の文字も含めた操作名を確認してください。

可能なら読み上げの利用場面を想定し、画像を見なくても必要な情報や操作先が分かるかを確かめます。

読み上げたときに何が重複し、何が足りないか。迷った箇所は画像の役割と判断理由を残し、関係者と相談しましょう。

持ち帰りポイント
公開前メモ：画像の役割／周辺本文との重複／必要な情報／リンクやボタンの目的／空altの理由／公開HTMLの確認結果。

サイト全体の点検につなげる

代替テキストはページ制作の一部です。サイトの移動先を確認するときは内部リンクの点検方法、改善の優先順位を考えるときはSEO対策の全体像も参考になります。Search Consoleの登録方法も、サイトの確認準備に活用してください。

制作体制やサイト改善の進め方を相談したい場合は、CommunityCreateへお問い合わせください。相談前の準備は、対象ページと画像の役割の整理。

正直なところ
架空HTMLの例は属性の有無と空文字を区別するためのものです。実際のサイトの読み上げ結果やアクセシビリティ適合を検証したものではありません。

よくある質問

画像の代替テキストを検討するときの疑問をまとめました。

すべての画像に説明文が必要ですか？

情報を追加しない装飾画像では、空のaltが適切な場合があります。

空のaltと属性の省略は同じですか？

異なります。空のaltは属性があり値が空で、欠落は属性自体がありません。

altに検索キーワードをたくさん入れるべきですか？

詰め込みを避け、画像の役割と文脈に合う内容を優先しましょう。

画像リンクには見た目を書きますか？

画像だけのリンクなら、遷移先や操作の目的が伝わるかを重視します。

同じ画像はどのページでも同じ文章ですか？

用途や周囲の説明が違えば、必要な内容も変わることがあります。

複雑なグラフは短いaltだけで十分ですか？

詳細を伝えきれない場合は、本文や表にも必要な情報を用意します。

属性があれば内容も適切ですか？

属性の有無だけでは判断できません。役割と文脈に合うか人が確認します。

altの文字数に一律の正解はありますか？

一律の文字数に合わせるより、必要な情報を過不足なく伝えることが大切です。

次の一歩
公開予定のページから画像を一つ選び、その画像が情報・装飾・操作のどれを担うか書き出してみましょう。

参考URL一覧

• 画像チュートリアル：https://www.w3.org/WAI/tutorials/images/
• 画像に関するベストプラクティス：https://developers.google.com/search/docs/appearance/google-images?hl=en
• 情報画像の案内：https://www.w3.org/WAI/tutorials/images/informative/
• 装飾画像の案内：https://www.w3.org/WAI/tutorials/images/decorative/
• 機能画像の案内：https://www.w3.org/WAI/tutorials/images/functional/