画像のalt（代替テキスト）の書き方｜写真・グラフ・リンクの実例

記事の入稿画面に「代替テキスト」という欄がある。「打ち合わせの写真」と書けばよいのか、キャプションと同じ説明を入れるべきか。写真を選んだ後にも、編集の判断は残っています。

代替テキストは、画像から受け取る情報や機能を、文字で伝えるためのものです。HTMLでは主に画像の alt 属性に設定し、画面を音声などで読み取るスクリーンリーダーにも使われます。その画像が記事の中で何を伝えているかから考えると、書く内容を選びやすくなります。

写真の説明、グラフの内容、クリックした先の案内では、必要な言葉が異なります。W3Cのアクセシビリティ資料を手がかりに、企業メディアの編集で使える判断と入稿例を整理します。以下の写真やグラフの例は、説明用に設定した架空のものです。

表はW3Cの判断フローを記事制作向けに整理したものです。同じ画像でも、周囲の文章やリンクの組み方で判断が変わります。

カバーは編集部作成の概念イラストです。

同じ写真でも、掲載する理由で説明は変わる

製品の紹介記事に、担当者が操作パネルに触れている写真を置くとします。操作方法を伝えたい節なら「操作パネルの右上にある開始ボタンを押す担当者」と書くことが考えられます。一方、その写真が取材相手の人物紹介に使われているなら、誰が写っているかが必要になるでしょう。

両方に同じ説明を付ける必要はありません。画像のファイル名が同じでも、読者に伝えたい情報は掲載場所によって変わるからです。

この図で操作位置を伝えたいなら、たとえば alt="操作パネルの右上にある開始ボタンを指す手" と書けます。「操作パネルの画像」だけでは、右上という情報が残りません。実際の写真では、写っている内容と本文を照合して文を決めます。

W3Cの「Informative Images」も、情報を伝える画像では、その意味や内容を代替テキストで伝えると説明しています。何が写っているかを機械的に列挙するだけでは、記事中の役割を捉えきれません。

編集時には、まず「この画像を外すと、読者は何がわからなくなるか」と問い直してみます。位置関係が必要なら位置を、操作が必要なら動作を残す。背景の壁の色や服装は、その記事で意味を持つ場合に説明します。

ただし、写真から確認できない気持ちや成果まで補ってはいけません。「安心して操作する担当者」「生産性が高まった現場」は、見た目だけでは確かめられない情報です。取材で確認した事実なら本文に根拠とともに置き、画像の説明と混同しないようにします。

キャプションと、読めなくなる情報を照合する

キャプションは、画像のそばに表示する説明文です。撮影した場所、登場人物、出典などを読者に伝えられます。代替テキストを考えるときは、この説明と周囲の本文も一緒に見ます。

たとえば、写真のキャプションに「試作機の操作パネル」と書いてあっても、右上のボタンを押す手順まで伝わるとは限りません。その動作が本文の理解に必要なら、文字による説明にも残す必要があります。

逆に、同じ情報が近くの本文で十分に伝わり、画像が追加情報を持たない場合もあります。W3Cの判断フローは、装飾や周囲のテキストと重複する画像に、空の alt を使う場合を示しています。画像ごとに、意味のある情報が失われないかを確かめて決めます。

空にすると決めた場合も、実装上は alt="" と、属性自体がない状態を区別します。CMSの入力欄を空白にしたときに、どちらが出力されるかは実装担当者と確認してください。空欄へファイル名や記事タイトルが自動入力される仕組みも、意図した結果になっているか点検します。

「キャプションがあるから常に空でよい」「写真だから必ず長い説明が要る」と、一律の入稿ルールにはしないことです。

たとえば、純粋な飾りとして使う区切り模様なら、HTMLの指定は alt="" です。これを alt="装飾画像" と書くと、「装飾画像」という不要な説明を増やしてしまいます。空のaltを意図して指定したのか、まだ未入力なのかは、CMS上でも区別して管理できると確認が進みます。

グラフは、短い案内と詳しい説明を組み合わせる

複数年の売上、調査結果の比較、工程の分岐。こうした図の情報を、短い代替テキストにすべて詰め込むと、構造を追いにくくなります。

W3Cの「Complex Images」では、複雑な画像について、何の図かを示す短い説明と、重要な情報を伝える詳しい説明を組み合わせる方法を示しています。詳しい説明を本文や表として、誰でも読める形で置くことも勧めています。

たとえば、架空の「月別の記事制作本数」のグラフなら、次のように分担できます。

この分担を使うなら、実際に図の直後へ表を置きます。「詳しくは本文」とだけ書いて、読者に該当箇所を探させないようにしましょう。

また、値の一覧だけで図の意味が伝わるとは限りません。工程図なら処理の順序や分岐条件、比較図なら何を基準に比べているかも必要です。色や矢印で表した関係を、文章でも辿れるようにします。

図から読み取れる変化と、その原因の説明も分けます。制作本数が増えたという図に、裏付けなく「AI導入で効率化した」と付け足すと、代替テキストが本文以上の主張をしてしまいます。図と説明は、同じ範囲の事実を伝えるものとして見直します。

リンク画像は、押した先がわかる言葉にする

記事末尾の資料案内や、画像だけのボタンには、操作の役割があります。資料の表紙を細かく描写しても、どこへ移動するのかが伝わらなければ、読者は選びにくくなります。

W3Cの「Functional Images」は、リンクやボタンの画像では、外見よりも行き先や操作を伝えるよう説明しています。

たとえば、画像だけのリンクから資料の紹介ページへ移るなら、「記事制作の進め方を紹介する資料を見る」という説明が考えられます。PDFを直接開くリンクと、申し込みフォームを開くリンクでは、実際の行き先に合わせて言葉を変えます。

同じリンクの中に「資料を見る」という文字があり、それだけで行き先が十分わかる場合は、補助的な画像の説明を重ねる必要がないこともあります。W3Cにも、同じリンク内の文字で機能が伝わる画像を、空の代替テキストにする例があります。

ここで見る単位は、画像ファイルだけでなく、リンク全体です。別々のリンクに見えるのか、画像と文字で一つのリンクなのか、入稿後の画面と出力を確認します。

SEOのためにも、キーワードを並べるより意味を書く

altは検索エンジンへのキーワード欄ではありません。Googleの画像SEOの案内は、画像の理解にaltやページの文脈を使うと説明し、キーワードの詰め込みを避けるよう求めています。

たとえば、操作パネルの写真へ「製造業 DX 生産性向上 おすすめ」と並べても、画像で伝えたい内容はわかりません。記事の主題に関係する言葉は、画像と掲載箇所に合う説明の中で使います。画像と関係のない検索語を足したり、検索のために装飾画像へ説明を付けたりする必要はありません。

altを整えれば検索順位が上がると約束することもできません。まず、画像を見ずに読んだときにも、記事の意味や操作が伝わるかを確認します。

入稿指示には「掲載場所」と「役割」を添える

代替テキストの執筆を、画像を最後に登録する人だけへ任せると、選んだ理由が伝わらないことがあります。編集部から渡す画像一覧に、掲載場所と役割を添えておくと、判断を引き継ぎやすくなります。

たとえば「操作方法の節／開始ボタンの位置を伝える／周囲の本文では位置を説明していない」と記録します。そのうえで代替テキスト案とキャプションを並べれば、情報の不足や重複を確認できます。これは、W3Cの判断を記事制作に取り入れるための編集上の提案です。

入稿の前提や確認担当をまとめる際は、記事制作の依頼書に残す項目も使えます。

AIに説明案をつくらせる場合も、画像に加えて掲載箇所と周囲の文章を渡し、案を人が照合します。写っていない物、確認できない人物名、気持ちの推測が混ざっていないかを見ます。機密資料や未公開写真は、自社で利用を認めた環境だけで扱ってください。

最後に、入稿画面の入力値と、実際のページで使われている代替テキストが一致するかを確認します。読み上げ順序、リンクのわかりやすさ、表への辿りやすさも、可能な範囲でスクリーンリーダーを使って確かめます。文字数や入力欄の有無だけでは、読者に意味が届くかは判断できません。

原稿を見直すときは、画像の説明も本文と一緒に読みます。記事の論点が変われば、同じ写真の役割も変わることがあるからです。本文のどこから更新するかは、記事のリライトで優先したい情報でも整理しています。まず次に入稿する1記事で、画像を選んだ理由を一文添えるところから始めてみてください。