画像のaltは、写っているものを全部説明する欄ではありません。そのページで画像が伝える情報や、リンク・ボタンの目的を言葉にします。情報を足さない装飾画像は空のaltにし、複雑な図は本文にも説明を用意する。画像単体ではなく、周囲の文章と操作まで見て判断しましょう。
登場するふたり
くるるって？
気になるものを見つけると、ついつい寄り道しちゃう好奇心いっぱいのくるる。「これ、なんで？」が口ぐせです。ひらめくとすぐに試したくなるけれど、途中で「あれれ？」と手が止まることも。そんなときは、まなボットのところへ。うまくできた日は、誰かに見てもらいたくてそわそわしています。
まなボットって？
くるると一緒に「なんでだろう？」を考える、小さなロボット。調べものが好きで、分からないことに出会うと、ちょっとうれしくなります。説明に夢中になって、つい話が長くなることも。くるるの「つまり、こういうこと？」に、新しい発見をもらっています。「なるほど！」と言ってもらえると、その日はずっとごきげんです。
会話内の企業・商品・場面は説明のための架空の例です。実際の改善実績を示すものではありません。
はじめに
「画像を登録すると、代替テキストという欄が出てくる」「SEOによいと聞いて、商品名や地域名をたくさん入れている」。企業サイトを更新するとき、altの書き方で迷ったことはありませんか。
altは、HTMLの画像要素に指定する代替テキストです。スクリーンリーダーなどで画像の情報を得るときにも使われます。大切なのは、画像が見えない状態でも、必要な情報や次の操作が分かること。くるるとまなボットが、写真・バナー・図解を例に、担当者が判断する順番を考えます。
第1話｜同じ写真なら、altも同じでいい？
くるる「会議の写真に『会議をしている人たち』って書いたよ。どのページでも使えるね！」
まなボット「その写真を、何のために置いたのかな。同じ写真でも、ページでの役割によって必要な説明は変わるよ」
仮に、社員が図面を囲む写真を考えてみます。仕事の進め方を紹介するページで、部署を越えて仕様を確認する様子を伝えたいなら、「設計と製造の担当者が図面を囲み、仕様を確認している」のような説明が候補になります。ただし、部署名や行動は確認できる事実に限ります。見た目だけから役職や気持ちを推測してはいけません。
一方、本文ですでに同じ内容を十分伝えていて、写真は雰囲気を添えるだけなら、追加の読み上げが必要ない場合もあります。「写真だから説明する」「人物がいるから人数を書く」とは決められません。
くるる「まず、この場所で伝えたいことを一つ言うんだね」
まなボット「そう。画像を隠してみて、何が分からなくなるかを考えると整理しやすいよ」
W3C WAIも、情報画像の代替テキストは、見た目を逐一描写するのではなく、文脈の中で意味を伝えるものとしています。情報画像の考え方（W3C WAI）
第2話｜書く前に、何を確認する？
くるる「画像を見ながら、うまい説明文を考えればいいのかな？」
まなボット「先に役割を分けよう。情報を伝えるのか、見た目を整えるのか、操作するためなのか。この三つから考えると迷いにくいよ」
まず、画像だけのリンクやボタンなら、行き先・操作の目的が分かる名前を用意します。次に、画像にしかない情報があるなら、その要点を言葉にします。情報を追加しない飾りなら、空のaltが候補です。文字を含む画像や複雑な図は、本文との分担も必要になります。
- 情報画像：商品、設備、作業など、読者の理解に必要な内容を伝える。
- 装飾画像：模様や飾りなど、取り除いても情報や操作が失われない。
- 機能を持つ画像：リンク・ボタンとして、移動や実行の目的を伝える。
この三分類は実務用の入口です。画像一枚が複数の役割を持つこともあるため、分類名だけで機械的に決めないようにします。たとえば商品写真が詳細ページへのリンクなら、商品を識別でき、リンクの目的も分かる表現が必要です。
判断に迷うときは、画像内の文字、リンクとしての役割、文脈上の意味を順に確認するW3C WAIのalt判断フローも参考になります。
第3話｜情報画像は、どこまで詳しく書く？
くるる「箱の写真なら、色、形、大きさ、机の模様も書く？」
まなボット「梱包方法を伝える写真なら、読者が知りたいのは、商品をどう保護しているかだよね」
仮の梱包例なら、「商品を緩衝材で包み、二重の箱に入れた梱包状態」と書けば、写真を掲載した理由が伝わります。「段ボールの写真」だけでは方法が分からず、背景の机まで説明すると要点を探しにくくなります。
商品の色違いを見分ける写真なら色が重要です。部品の取り付け向きを示す写真なら向きが重要です。何を省くかは、短くすることだけを目的にせず、読み手が比較・判断するために必要かで決めます。
くるる「何文字以内なら正解、という決まりは？」
まなボット「この作業では一律の文字数を目標にしなくていいよ。短い文で要点を伝え、長い説明が必要なら本文に分けよう」
担当者同士で確認するなら、「この説明だけで、写真から得てほしいことが分かるか」を問いにします。画像のファイル名、社内管理番号、根拠のない「高品質」「安心」といった宣伝文を、そのままaltに流し込まないようにしましょう。
第4話｜空欄にしてよい画像もある？
くるる「説明しない画像があると、入力漏れにならない？」
まなボット「情報を足さない装飾画像には、空のaltを指定するんだ。alt自体を省くこととは違うよ」
飾りの線や模様、本文と同じ内容を添えるだけのイラストなどは、文脈によって装飾扱いにできます。HTMLでは alt="" と指定します。alt属性そのものがないと、読み上げ環境によってファイル名などが読まれる場合があります。装飾画像の扱い（W3C WAI）
CMSの欄を空にしただけで、必ず alt="" が出力されるとは限りません。テンプレートやプラグインが別の値を補う場合もあるため、公開されるHTMLで確認します。「空欄はすべて埋める」という一括処理は、意図した空altも上書きしてしまいます。
また、CSSの背景画像には、img要素と同じalt属性を付けることはできません。背景が単なる装飾ならよいのですが、営業時間や工程などの重要情報を背景画像だけに載せると、情報が届かない原因になります。HTMLの文字でも示すか、適切な代替テキストを持つ画像として実装できないか、制作担当に相談しましょう。CSS背景だけで情報を伝える場合の注意（W3C）
第5話｜リンク画像には、見た目を書く？
くるる「ダウンロードのアイコンには『下向きの矢印』でいい？」
まなボット「その画像だけで操作するなら、何が起きるかが必要だね。『会社案内をダウンロード』の方が目的を選びやすいよ」
虫眼鏡なら「検索」、会社案内の画像ボタンなら「会社案内をダウンロード」のように、操作の意味を表します。ただし、実際には資料一覧へ移動するだけなら「会社案内の資料ページへ」など、動作に合わせます。ファイルを直接開く場合は、PDFであることなど、判断に必要な情報も検討します。機能を持つ画像（W3C WAI）
一方、同じリンクの中に「会社案内をダウンロード」という文字がすでにあり、矢印は補助的な飾りなら、矢印画像のaltは空にできます。画像が空altでも、リンク全体として目的が分かる名前が残ることが条件です。
くるる「画像の隣に説明があれば、いつでも空でいい？」
まなボット「別々のリンクになっていると、画像側だけ名前がなくなることがあるよ。見た目の近さではなく、リンクのまとまりも確認しよう」
ロゴだけを押してトップページへ戻る場合も、「ロゴ」という形の説明だけで終わらせず、会社名とホームへの移動が分かる名前を考えます。
第6話｜グラフの数字は、全部altに入れる？
くるる「グラフの数字を全部書いたら、すごく長くなったよ」
まなボット「複雑な図は、短いaltと本文の詳しい説明に分けよう。表で読めると、数値を比較しやすいこともあるね」
仮に、四半期ごとの相談件数を示す図なら、altは「四半期別の相談件数。数値と傾向は次の表と本文に記載」のように図を識別し、説明の場所を案内します。その近くに期間・単位・各値の表と、読み取ってほしい傾向を置きます。数値を挙げる場合は出典を確認し、実績がないのにもっともらしい数字を作らないようにします。
工程図なら、工程名だけでなく順序や分岐条件も文章にします。地図なら、住所だけで十分か、入口や道順も必要かを確認します。「詳細は図をご覧ください」では、図が見えない人の説明になりません。
短い説明と詳細な説明を組み合わせる考え方は、複雑な画像のチュートリアル（W3C WAI）でも示されています。本文の説明や表があることを確認してから、altを短く整えましょう。
図の数値は説明用の仮例です（A＝1、B＝2、C＝3）。
第7話｜画像内の文字と、本文はどう分ける？
くるる「キャンペーンの条件を画像にまとめれば、すっきり見えるね」
まなボット「画像の中にしか条件がないと、文字を拡大したり読み上げたりするときに困ることがある。大切な条件はHTMLの文字でも読めるようにしよう」
文字画像が必要な場合、ほかに提示されていない文字情報は代替テキストにも含めるのが基本です。ただし、長い募集条件や注意事項をaltだけに詰め込むより、本文に見出し・箇条書きで掲載する方が確認しやすくなります。ロゴなどの例外はありますが、通常の文章は画像化せず文字で提供することを優先します。文字画像の考え方（W3C WAI）
反対に、同じ内容を画像のalt、直後の文章、リンク名で何度も繰り返すと、読み上げが冗長になります。たとえば同一リンク内のロゴと会社名が同じ意味を伝えるなら、ロゴを空altにする方法があります。追加の意味がある画像まで、一律に空にしないことも大切です。
画像の下のキャプションは、見ている人にも説明を示すものです。title属性もaltとは別のもの。キャプションやtitleを入力したからaltの判断は不要、とは考えず、実際のページで意味と重複を確認します。
第8話｜CMSの自動入力に任せても大丈夫？
くるる「素材を登録するとき、一度書いたら終わりにしたいな」
まなボット「登録時の説明はたたき台にできるけれど、使う場所で確認しよう。自動生成も同じで、ページの意図まで合っているとは限らないよ」
運用では、素材を登録する人が確認できる事実を残し、ページを編集する人が掲載目的に合わせて調整する分担が考えられます。管理表には「掲載ページ／画像の役割／alt案／本文側の説明／確認者」を記録します。空altにも「本文と重複する装飾」などの理由を残すと、後から入力漏れと誤解されにくくなります。
同じ画像を複数ページで使う場合、CMSの素材情報を直すと全箇所に反映されるのか、各ページに保存された値は別なのかも確認してください。変更後は、代表的な掲載先を開いて出力を確かめます。
Googleは画像の理解にaltと周囲の情報を使い、キーワードの詰め込みを避けるよう案内しています。また、CSSの画像はインデックスに登録しないと説明しています。情報を画像検索にも届けたい場合は、標準の画像要素の利用を制作担当と確認しましょう。Google画像SEOの公式ガイド
altを直せば検索順位が上がる、という保証はありません。自動生成の文章やSEO用キーワードを一括投入する前に、読者に必要な意味を確認することが先です。
第9話｜公開前は、どの順番でチェックする？
くるる「入力欄が埋まっているかだけじゃ、確認できないんだね」
まなボット「ページを読み進める順番で、情報と操作が通じるかを見よう。まずは次の五つからだよ」
- 役割：情報・装飾・操作のどれか。空altにも判断した理由があるか。
- 要点：画像が見えなくても、そこで伝えたい内容が分かるか。推測を足していないか。
- 操作：画像リンクやボタンの名前で、行き先や動作を判断できるか。
- 重複：周囲の文章や同一リンク内の文字を、不要に繰り返していないか。
- 本文：複雑な図や画像内の重要な文字を、本文・表でも確認できるか。
編集画面だけでなく、実際の表示とHTMLのaltを確認します。可能ならスクリーンリーダーでも、読み上げ順、リンク名、説明の重複を確かめましょう。操作を伴う箇所は、キーボードで移動して使えるかも確認します。自動チェックでaltの欠落を見つけられても、内容の適切さまで確定できるわけではありません。
画像を差し替えたときは、古いaltが残っていないかも点検します。このチェックだけでサイト全体のアクセシビリティを保証するものではありませんが、画像の意味を見直す入口になります。
まとめ｜まず一枚、置いた理由を言葉にする
くるる「全部を説明するより、何を伝えるための画像かを考えるんだね」
まなボット「うん。そのうえで、短いalt、空のalt、本文の詳しい説明を使い分けよう。リンクなら操作の目的も忘れずにね」
まずは、よく見られるサービスページから一枚選んでみてください。掲載した理由を書き、画像を見なくても必要な情報が伝わるかを確認する。その判断を、制作時の原稿と更新時のチェックに残していけば、担当者が変わっても見直しやすくなります。
参考資料
本文の技術的な説明は、以下の一次資料を2026年10月30日に確認しました。仮例とCMSの管理手順は、編集部による実務上の提案です。
