記事画像のaltに何を書くか

1. 画像を隠したら何が分からなくなるか考える

記事の画像は、雰囲気を添える写真もあれば、設定値や操作場所を説明する画面もあります。まず画像の前後を読み、「この画像がなければ読み手が何を判断できなくなるか」を一文にします。答えが操作場所なら操作場所を、比較結果なら比較に必要な違いを伝えることが出発点です。

W3C WAIは、説明を担う画像、装飾画像、リンクやボタンに使う画像を目的に応じて扱う方法を示しています。装飾だけなら空のalt、操作画像なら見た目より機能を伝える、という区別です。参考: W3C WAI・画像の代替テキスト。確認日: 2026年9月10日。

以下の文章は書き分けを考えるための独自例です。同じ写真でも配置や本文が違えば適切な説明は変わるため、文例をそのまま全ページへ貼らないでください。

2. 役割別に書き分ける

スマホでは表を横にスクロールできます。

「画像」「写真1」「image-final.png」だけでは、なぜその画像があるのか伝わりません。一方で、altを長い宣伝文にすると、本文を理解するための情報が埋もれます。検索用の語を並べる欄ではなく、その場所で不足する説明を書く欄として扱います。

3. スクリーンショットでは操作と注意を本文にも残す

「赤い丸をクリック」という案内だけでは、色や画像を頼れない人に伝わりません。本文を「公開設定の欄を開き、保存状態を確認します」のようにし、画像は位置を補う資料として使います。実際の画面名が確認できていない場合は、存在しないボタン名や設定値を作って説明しないでください。

たとえば仮の公開設定画面なら、次は代替テキストの書式例になります。実在する画面の記録ではなく、ファイル名・寸法・文章は掲載する画像に合わせて置き換えます。

コード例は横にスクロールできます。

<img src="publish-setting.png" width="960" height="540"
     alt="公開設定の確認欄。保存済みと表示">

画面に複数の重要な設定があるなら、そのすべてを一つのaltへ詰め込まず、本文で項目ごとに説明します。認証情報やメールアドレスを画像から隠した場合は、altやキャプションに同じ情報を残していないかも確認してください。見た目だけを伏せても、テキストから読めれば非公開にはなりません。

4. 画像とリンク文字を重複させない

記事カードで、画像と記事タイトルが同じ一つのリンクに入っている場合、画像のaltにタイトルをそのまま入れると同じ名前を繰り返し読ませることがあります。画像が装飾で、リンク内の文字だけで行き先が分かるなら、画像を空のaltにする方法があります。

ただし画像とタイトルが別々のリンクなら、画像リンクにはそれだけで分かる名前が必要です。「隣にタイトルが見えるから」と、画像だけのリンクまで一律に空にしないでください。部品のHTML構造を見て判断します。CSSで文字を非表示にしている場合も、見えているものと読み上げられるものの両方を確かめます。

グラフや図では、短い説明だけで詳細を伝えきれないことがあります。本文に比較条件や表を置けば、画像を見られる人にも数値を確認しやすい資料になります。

5. 公開前に画像台帳を一周する

1. 画像のURLと掲載ページ、役割を一覧にする。
2. 画像がなくても本文だけで手順が追えるか読む。
3. altが空の理由、または必要な説明が入っているか確認する。
4. 画像リンクを単独で見ても行き先が分かるか調べる。
5. 読み上げやキーボード操作で重複・名前のないリンクがないか試す。

altの有無を検査するツールは便利ですが、文章がその場面に合っているかは別の確認です。自動生成された説明も、実際の画像と本文を照合してから使います。画像を差し替えた際には古い説明が残りやすいため、ファイルの交換とaltの見直しを同じ作業票にしてください。

表示時の揺れや寸法は別の問題です。読みやすさと合わせて画像の表示枠を整える方法も確認すると、画像まわりの点検をまとめられます。

画像そのものを作るツールの使い分けは、ホームページ用の画像を作るツールの選び方で整理しています。

画像の種類別の記入例

表は横にスクロールできます。

例の文章は書き方の参考です。実際の画像に写っている内容に合わせて書いてください。

公開前の確認表

表は横にスクロールできます。

画像そのものの作り方はホームページ用の画像を作るツールの選び方で紹介しています。